React-Table 中的自动列不适用于 JSON 数组答案

【问题标题】：Automatic Columns in React-Table not working with JSON ArraysReact-Table 中的自动列不适用于 JSON 数组
【发布时间】：2019-08-26 20:02:29
【问题描述】：

我正在尝试从获取请求中动态生成一个表。它可以在没有数组名称的情况下使用 JSON 数据，但是当它这样做时，它就不起作用了。这是代码：https://codesandbox.io/s/static-example-319q4

这里，该示例适用于没有 JSON 数据的数组名称的数据，但是，当使用其他 componentDidMount 函数时，即使我使用“posts”指定了数组名称，它也不起作用.发射”。

class App extends React.Component {
constructor(props){
    super(props);
    this.state = {
      posts: [],
      value: '',
    }
  }


/*
Get response from an API endpoint and populates the 
*/
componentDidMount() {
    //const params = this.state.text
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url, {
      method: "GET"
    })
      .then(response => response.json())
      .then(posts => {
        this.setState({ posts: posts });
      });
  }

/*
  componentDidMount() {
    //const params = this.state.text
    const url = "https://hn.algolia.com/api/v1/search?query=redux";
    fetch(url, {
      method: "GET"
    })
      .then(response => response.json())
      .then(posts => {
        this.setState({ posts: posts.hits });
      });
  }

*/


  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 {
      console.log("Error")
      return [];
    }
  }

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

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

任何帮助都会很棒！谢谢！

【问题讨论】：

标签： javascript react-table

【解决方案1】：

您的 JSON 中的某些数据与 React Table 期望其在网格中的输入不一致。检查工作示例中的条件 -

"_tags" && x !== "_highlightResult"

删除这些键后，我进一步烘焙了列并使其正常工作。请检查工作示例 -

https://codesandbox.io/s/static-example-x2kjr

代码-

getColumns() {
          const getPostKeys = this.state.posts[0];
          if (getPostKeys) {
            function isNotTagsOrHighlightKey(x) {
              return x !== "_tags" && x !== "_highlightResult";
            }
            const getSanitizedColumns = Object.keys(getPostKeys).filter(
              isNotTagsOrHighlightKey
            );
            const newColumn = getSanitizedColumns.map(key => {
              return {
                Header: key,
                accessor: key
              };
            });
            return newColumn;
          } else {
            console.log("Error");
            return [];
          }
        }

【讨论】：