Ошибка: объекты недопустимы как дочерний элемент React. Если вы намеревались отобразить коллекцию дочерних элементов, используйте вместо этого массив - PullRequest
Новая
       29

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

0 голосов
/ 12 марта 2020

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

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            exRates: []
        };
    }
    getCurrencyRatesFromDB = () => {
        fetch('https://api.exchangeratesapi.io/latest')
           .then((response) => {
             console.log('then 1', response);
            return response.json();                                                                     
        }).then((data) => {
            console.log('then 2', data);
            this.setState({
                exRates: data.rates
            });
        });
    }

    render() {
        console.log('render started');
        return (
            <div>
                console.log('return started')
                {this.state.exRates.map(rate => {
                   return <div>{rate.toString()}</div>
                 })}
                <button 
                    type="button" 
                    className="btn"
                    onClick={() => {
                        this.getCurrencyRatesFromDB();                                          
                    }}
                    >
                        Load rates
                </button>
                <p>{this.state}</p>
        </div>        
        )
    }
}

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

Что мне нужно сделать, чтобы справиться с этим? Заранее большое спасибо.

1 Ответ

0 голосов
/ 13 марта 2020

Объект, вызывающий эту ошибку, - this.state, где вы отображаете его в теге p в конце вашего компонента.

Как уже упоминалось в верхнем ответе на на этот вопрос , единственными приемлемыми дочерними элементами React являются JavaScript Примитивы , например, строки и числа. Для рендеринга изменчивых вещей, таких как объекты и массивы, вы должны дать React некоторые инструкции о том, как отображать их в терминах примитивов, например, что делать с каждым элементом в массиве или какие ключи в объекте помещать на страницу.

У вас правильная идея рендеринга массива путем сопоставления ранее в компоненте: 

{this.state.exRates.map(rate => {
    return <div>{rate.toString()}</div>
})}

Это отрендерит все в exRates, что, похоже, все, что у вас есть в this.state. Если вы хотите проверить фактический объект this.state, попробуйте поместить console.log(this.state) в свой метод рендеринга, но за пределами return.

Стоит также отметить, что console.log('return started') собирается поместить этот текст в текст страница.

РЕДАКТИРОВАТЬ: Вот как вы можете использовать Object.entries, чтобы получить то, что вам кажется здесь. Как только вы получите нужные данные во втором .then в getCurrencyRatesFromDB, вместо того, чтобы делать this.setState({exRates: data.rates});, я бы порекомендовал сделать this.setState({exRates: Object.entries(data.rates)});

Таким образом, у вас будет массив массивов, который представляет данные из вашего объекта. например, если у вас было {usd: 10, eur: 12, gbp: 15} в data.rates, вы получите [[usd, 10], [eur, 12], [gbp, 15]] в state.exRates.

Затем, в вашем методе render, вы можете сделать следующий код для рендеринга этой информации в вашем компоненте: 

{this.state.exRates.map(([currency, rate]) => <div>{`${currency}: ${rate}`}</div>)

Это даст вам HTML, который выглядит примерно так: 

<div>usd: 10</div>
<div>eur: 12</div>
<div>gbp: 15</div>

Отрегулируйте капитализацию при необходимости.

Если часть ...([currency, rate]) => ... вас бросила, это Разрушение массива , и это очень полезная функция современного JavaScript.

...