Question

我正在尝试保存从API调用返回的JSON对象数组，以在React中声明状态（以便我可以使用数据来呈现表）。我收到错误Error: Objects are not valid as a React child (found: object with keys {street, suite, city, zipcode, geo}). If you meant to render a collection of children, use an array instead.

我不知道如何解决此问题。看起来JSON已正确存储在数组中。但是，在对象内部还有嵌套的对象可能会引起问题，例如：

address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",

任何帮助将不胜感激。这是我的代码如下：

let tableData = []
fetch("https://jsonplaceholder.typicode.com/users")
            .then(response => response.json())
            .then(data => { 
                tableData = data
                props.addItem(tableData)
            })

这是addItem函数：

addItem(item) {
     this.setState(function(prevState) {
        return {
          tables: [...prevState.tables, item]
        }
      })
}

更新

这是我呈现数据的方式：

App.js：

render() {
     return (
          <div>
               {this.state.tables.map(item => {
                 return (<TableComponent key={item} data={item} />)
               })}
          </div>
     )
}

TableComponent.js：

class TableComponent extends React.Component {
    constructor(props){
      super(props);
      this.getHeader = this.getHeader.bind(this);
      this.getRowsData = this.getRowsData.bind(this);
      this.getKeys = this.getKeys.bind(this);
    }

    getKeys = function(){
      return Object.keys(this.props.data[0]);
    }

    getHeader = function(){
      let keys = this.getKeys();
      return keys.map((key, index)=>{
        return <th key={key}>{key.toUpperCase()}</th>
      })
    }

    getRowsData = function(){
      let items = this.props.data;
      let keys = this.getKeys();
      return items.map((row, index)=>{
        return <tr key={index}><RenderRow key={index} data={row} keys={keys}/></tr>
      })
    }

    render() {
        return (
          <div>
            <table>
            <thead>
              <tr>{this.getHeader()}</tr>
            </thead>
            <tbody>
              {this.getRowsData()}
            </tbody>
            </table>
          </div>

        );
    }
}

const RenderRow = (props) =>{
  return props.keys.map((key, index)=>{
    return <td key={props.data[key]}>{props.data[key]}</td>
  })
}

Answer 1

此错误消息使我失望，因为它使问题似乎出在将对象保存为状态。但是，正如注释中指出的那样，该错误在渲染期间发生。为了解决该问题，我将RenderRow更改为以下内容：

const RenderRow = (props) =>{
  return props.keys.map((key, index)=>{
    return <td key={props.data[key]}>{typeof props.data[key] === "object" ? JSON.stringify(props.data[key]) : props.data[key]}</td>
  })
}

具体来说，我更改的部分是首先检查特定元素是否为对象，如果是，则在将其呈现到屏幕之前使用JSON.stringify()将其转换为字符串。

如何保存JSON对象数组（带有嵌套对象）以在React中声明

更新

1 个答案: