Как сохранить массив объектов JSON (с вложенными объектами) в состояние в React - PullRequest
Новая
       35

Как сохранить массив объектов JSON (с вложенными объектами) в состояние в React

0 голосов
/ 01 ноября 2019

Я пытаюсь сохранить массив объектов JSON, возвращенных из вызова API в состояние в 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]
        }
      })
}

ОБНОВЛЕНИЕ

Вот как я рендерим данные:

Приложение.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>
  })
}

1 Ответ

0 голосов
/ 01 ноября 2019

Сообщение об ошибке сбило меня с толку, потому что казалось, что проблема была в сохранении объектов в состояние. Однако, как было отмечено в комментариях, ошибка произошла во время рендеринга. Чтобы решить эту проблему, я изменил 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() дляпреобразовать его в строку перед отображением на экране.

...