Использование React-Table и Fetch GET JSON для создания динамической таблицы со столбцами

Привет, новичок в React, и я пытаюсь создать таблицу с помощью React-Table с автоматическими столбцами, используя данные JSON через получение ответа.

У меня есть пример таблицы, созданной на основе извлечения получить

componentDidMount(){
    const url = 'https://jsonplaceholder.typicode.com/posts/';
    fetch(url,{
      method: "GET"
    }).then(response => response.json()).then(result => {
      this.setState({posts: result })
    })
  }

однако вам необходимо указать средства доступа, что непрактично для больших наборов данных. Вот песочница для этого кода: https://codesandbox.io/embed/goofy-dew-u94bu

У меня есть еще один пример таблицы с автоматическими столбцами, однако JSON жестко запрограммирован, поэтому я не знаю, как работать с ответом на выборку, чтобы назначить его глобальному, чтобы сделать его «жестко запрограммированным», потому что он асинхронный.

Вот песочница для этого кода. https://codesandbox.io/s/static-fnn42

в этом примере он успешно создает таблицу на основе initial_data, однако, когда я раскомментирую componentDidMount и заменяю this.state.initial_data на this.state.posts возникает ошибка

class App extends React.Component {
constructor(props){
  super(props);
  this.state = {
    posts: [],
    value: '',
    initial_data: [
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
]
  }
}

/*
componentDidMount(){
  const url = 'https://jsonplaceholder.typicode.com/posts';
  fetch(url,{
    method: "GET"
  }).then(response => response.json()).then(posts => {
    this.setState({posts: response.posts})
  })
}
*/


getColumns() {
  return Object.keys(this.state.initial_data[0]).map(key => {
    return {
      Header: key,
      accessor: key
    };
  });
}

render() {
  const columns = this.getColumns();
 // console.log(JSON.stringify(this.state.initial_data));
  return (
    <div>
      <ReactTable
        data={this.state.initial_data}
        columns={columns}
        defaultPageSize={10}
        className="-striped -highlight"
        filterable
      />
      <br />
    </div>
  );
}
}

ReactDOM.render( <
App / > ,
document.getElementById('app')
);
  </script>
</body>
</html>

В приведенной ниже функции возникает ошибка, когда вы заменяете this.state.initial_data на this.state.posts [0], он говорит, что объект имеет значение NULL, что предположительно связано с тем, что как только он выходит из FETCH get, данные, потому что они не определены, исходя из их синхронной природы. Если да, как мне это обойти?

getColumns() {
    return Object.keys(this.state.initial_data[0]).map(key => {
      return {
        Header: key,
        accessor: key
      };
    });

Я также думаю, что есть проблема с состоянием «posts: []», так как когда я его записываю, он показывает [], затем [object], для жестко запрограммированного примера он просто показывает [Object].

Я открыт для других решений / библиотек, чтобы они работали. Если бы у вас могло быть ваше решение в codeandbox, jsfiddle, codepen и т. Д., Это было бы здорово! Спасибо!!


reactjs javascript fetch react-table
person hello    schedule 24.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно добавить условие в свой getColumns() метод, чтобы Object.keys выполнялся только тогда, когда this.state.posts[0] имеет такие данные, как -

  getColumns() {
    const getPostKeys = this.state.posts[0];
    if (getPostKeys) {
      const column =
        this.state.posts &&
        Object.keys(getPostKeys).map(key => {
          return {
            Header: key,
            accessor: key
          };
        });
      return column;
    } else {
      return [];
    }
  }

Рабочий пример - https://codesandbox.io/s/unruffled-clarke-ln7wx

person swapnesh    schedule 24.08.2019