Отображение проблемы с извлеченными данными: объекты недействительны как дочерние элементы React / TypeError: undefined

Я хотел бы отображать данные, полученные из api, с помощью методов жизненного цикла. Мне удается получить данные (объект) и заполнить мои данные в состоянии (массиве). Но я не могу отобразить значения в возвращаемой части.

Первая часть кода, которая кажется работающей, для удобства чтения я удалил часть ошибки / загрузки:

class App extends Component {
    constructor(props) {
        super(props);
    
        this.state = {
          data: [], //putting data in the state
        };
      }
    
    async componentDidMount() {
        fetch("https://covid19.mathdro.id/api")
        .then((response) => response.json())
        .then(
            (data) => {
                this.setState({
                confirmed: data.confirmed, //populate data in this.state
                recovered: data.recovered,
                deaths: data.deaths,
            });
            }
          );
      }
    
    render() {
        const { confirmed, recovered, deaths } = this.state;
        console.log(confirmed, recovered, deaths);
        ...
    }
    
    export default App;

Вот первая попытка возврата:

return ( <div> {(confirmed, recovered, deaths)} </div>);

Я получил

Ошибка: объекты недопустимы как дочерние объекты React (найдено: объект с ключами {значение, деталь}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Console.log действительно возвращает объекты:

Объект {значение: 42280709, деталь: https://covid19.mathdro.id/api/confirmed} Объект {значение: 28591681, деталь: https://covid19.mathdro.id/api/recovered} Объект {значение: 1145557, деталь: https://covid19.mathdro.id/api/deaths}

Кстати, console.log(confirmed.value) ничего не возвращает, почему?

Поэтому я решил использовать Array.prototype.map():

return (
    <div> 
        {this.state.confirmed.map(i => (<div>{i.value}</div>))} 
    </div>);

И теперь я получил

TypeError: подтверждено не определено

Я не понимаю эту ошибку, как console.log(confirmed) что-то может вернуть, если оно не определено?

Другие пути, которые я изучал: использование JSON.parse, добавление ключа на карту, удаление {}, ..

Я ответил на несколько вопросов о stackoverflow, но до сих пор не понимаю, что изменить: React render: объекты недействительны в качестве дочерних React Объекты недопустимы как дочерние объекты React. Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив

Какие-нибудь подсказки? Спасибо !


reactjs typeerror javascript-objects array.prototype.map react-lifecycle
person Mamily    schedule 24.10.2020    source источник
comment
Я откатил ваше изменение, добавив ответ на ваш вопрос. Я рада, что вы нашли решение своей проблемы. Однако фактический ответ / решение не следует редактировать в вашем вопросе. Как правило, вам следует отредактировать вопрос, чтобы прояснить вопрос, но не включать ответ. в вопросе. Вы должны создать свой собственный ответ с кодом, который вы использовали для решения вашей проблемы, а затем принять его (системе может потребоваться 48-часовая задержка перед принятием вашего собственного ответа).   -  person Dharman    schedule 25.10.2020

Ответы (2)


arrow_upward
1
arrow_downward

Я проверил API, который вы использовали, и увидел, что confirmed, recovered, deaths являются объектами, а не массивами (That's why you're getting those error). вы должны выполнить следующий код.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { confirmed: {}, recovered: {}, deaths: {} };
      }
    
    async componentDidMount() {
      fetch("https://covid19.mathdro.id/api")
      .then((response) => response.json())
      .then(
          (data) => {
            const { confirmed, recovered, deaths } = data
            this.setState({ confirmed, recovered, deaths });
          }
        );
      }
    
    render() {
        const { confirmed, recovered, deaths } = this.state;
        return (
          <div>
            <div>Confirmed: { confirmed.value || 0}</div>
            <div>Recovered: { recovered.value || 0}</div>
            <div>Deaths: { deaths.value || 0 }</div>
          </div>
        )
    }
}
    
export default App;
person Naren    schedule 24.10.2020

arrow_upward
0
arrow_downward

Прежде всего, вы не можете отображать объекты внутри JSX, это должен быть действительный элемент JSX, посмотрите ReactNode для получения дополнительной информации.

Вторая проблема, с которой вы столкнулись, связана с вашим исходным состоянием, которое представляет собой объект с пустым массивом с именем data; this.state = { data: [] };. Поэтому, когда вы пытаетесь получить доступ к свойству confirmed объекта this.state.data; это не удается, потому что ваши данные еще не поступили из вызова API.

Что вам нужно сделать, так это перед рендерингом чего-либо проверить, есть ли у this.state.data свойство с именем confirmed

 return (<div>
          {this.state.confirmed && <div> 
            {this.state.confirmed.map(i => (<div>{i.value}</div>))} 
         </div>}
        </div>)
person Anuja    schedule 24.10.2020