Перезагрузить реагирующую таблицу на событие

Я использую React в качестве инструмента для отображения своих данных в сочетании с таблицей реагирования фреймворка чтобы перечислить мои данные.

У меня есть поле для создания нового объекта в моей базе данных, но я не могу перезагрузить таблицу, не выходя из своего представления.

Мой вопрос, как повторно использовать функцию для загрузки данных? (исходный код)

class ElementCRDN extends React.Component {
    constructor(props) {
        super(props);
        this.handleCreation = this.handleCreation.bind(this);
        this.handleInput = this.handleInput.bind(this);
        this.state = {
            data: [], // the data retrieved from the server
            pages: -1,
       };
   }

   handleCreation(event) {
        Axios.post('/createElement', {
            // data
        }).then(() => {
            // Ask for reload
       });
       event.preventDefault();
   }

   render() {
       <form onSubmit={this.handleCreation}>
           // input to create object
       </form>
       <ReactTable
          data={this.state.data}
          pages={this.state.pages}
          loading={this.state.loading}
          manual
          columns={columns}
          onFetchData={(state) => { // function to retrieve the data
              this.setState({ loading: true });
              Axios.post('/listElements', {
                  page: state.page,
                  pageSize: state.pageSize,
                  sorted: state.sorted,
                  filtered: state.filtered,
              }).then((res) => {
                  this.setState({
                  data: res.data,
                  loading: false,
                  });
              });
          }}
       />
   }

Спасибо за чтение


reactjs node.js react-table
person IPessers    schedule 07.05.2018    source источник
comment
Я также разместил проблему в git, мне не хватало ключа Особенность React: он не перерисовывает дочерние компоненты, если их состояние не меняется. @Explosion Pills был прав, мне нужно было понять, почему   -  person IPessers    schedule 09.05.2018

Ответы (1)


arrow_upward
2
arrow_downward

Я бы просто добавил элемент к вашим данным после успешного создания. Вы можете снова использовать this.setState с новым значением данных, которое вы публиковали с помощью createElement.

async handleCreation(event) {
  this.setState({ loading: true });
  await Axios.post('/createElement', data);
  this.setState({ data: this.state.data.concat(data), loading: false });
}
person Explosion Pills    schedule 07.05.2018
comment
Это будет работать в большинстве случаев, но для меня серверная часть изменяет данные, которые не позволяют мне просто вставить отправленные данные в массив. - person IPessers; 08.05.2018