Блог

Главная - Вопросы по программированию - Reactjs обновляет таблицу

Reactjs обновляет таблицу

#json #reactjs

#json #reactjs

Вопрос:

У меня есть 2 сценария:

  • table.js : визуализирует таблицу данных
  • os.js : возвращает имя операционной системы

Данные в таблице загружаются с помощью json. Пример json:

 [
  {"server":"server1.com"},
  {"server":"server2.com"}
]

При нажатии кнопки таблица должна проверять имя_сервера и обновлять соответствующие данные ОС. Как я могу это сделать?

table.js:

 import getOS from "./os.js";

class TableRow extends Component {
  constructor(props) {
   super(props);

   this.state= {label: ''};

   this.update = this.update.bind(this);
  }

  update(){
    getOS(servername);
  }

  render() {
    const { data } = this.props;

    const list = data.map(adata => {
      return (
        <tr>
          <td key={adata.server}>{adata.server}</td>
          <td key={adata.os}></td>
        </tr>
      )//return
    })//regionslist

    return (
      <React.Fragment>
      { list }
      <Button size="sm" type="submit" onClick= {this.update}>
            Get Details
      </Button>
      </React.Fragment>
    );//return
  } //render
} //class

Комментарии:

1. итак, что делает функция getOS? Возвращает ли он данные, которые вы хотите отобразить?

2. yes…it просто возвращает версию ОС, как только ей передается servername … например, для server1 он вернет osname как «Linux».

3. и откуда вы получаете servername прямо сейчас?

4. именем сервера будут данные в этой строке: <td key={adata.server}>{adata.server}</td> …. пытаюсь найти способ получить значение этой переменной, т.е. servername

5. итак, подождите… Вы хотите найти способ передать эти данные в this.update функцию или вы хотите использовать эти данные для отображения и отображения строк?

Ответ №1:

Если вы хотите вернуть кнопку в каждой строке, вы можете сделать это следующим образом:

 class TableRow extends Component {
  constructor(props) {
    super(props);

    this.state = { label: '', data: this.props.data };
  }

  update = (servername) => {
    const data = getOS(servername);
    this.setState({ data });
  };

  render() {
    return this.state.data.forEach((adata) => {
      return (
        <React.Fragment>
          <tr>
            <td key={adata.server}>{adata.server}</td>
            <td key={adata.os} />
          </tr>
          <Button size="sm" type="submit" onClick={this.update(adata.server)}>
            Get Details
          </Button>
        </React.Fragment>
      );
    }); //return
  } //render
} //class