forEach не работает для response.data в React

Question

Я пытаюсь перебрать ответ из файла данных, однако получаю ошибку, которую не могу отладить или не вижу, почему она не работает. Я пробовал forEach и map внутри функции, но она не удалась точно так же.

Я пробовал forEach и map внутри функции, но она не работала точно так же.

class GetTiles extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tileData: {},
            dataLoaded: false
        };
    }

    loadData() {
        axios("assets/data/home.json")
            .then(response => {
                this.setState({
                    tileData: response.data.titles,
                    dataLoaded: true
                });
                console.log("Local Tiles Ajax Call: Success");
            })
            .catch(err => {
                console.log("Local Tiles Ajax Call", err);
            });
    }

    componentDidMount() {
        this.loadData();
    }

    render() {
        return (
            <>
                <Tile title="1" />
                {this.state.tileData.map((item, index) => (
                    <p key={index}>Hello!</p>
                ))}
            </>
        );
    }
}

export default GetTiles;

Пожалуйста,обратите внимание, я знаю, что не имеет смысла, почему я делаю это, но это помогает мне понять и отладить проблему / получить что-то работающее.

{
    "_id": "home",
    "titles": [
        {
            "type": "app",
            "title": [
                {
                    "text": "Demo",
                    "locale": "en-gb"
                }
            ],
            "data": {
                "app_name": "lorem",
                "category": "demo"
            }
        },
        {
            "type": "app",
            "title": [
                {
                    "text": "Demo 2",
                    "locale": "en-gb"
                }
            ],
            "data": {
                "app_name": "ipsum",
                "category": "sports"
            }
        }
    ]
}

Я хочу иметь возможность таргетировать названия в пределахJSON для получения данных из него и распечатки данных для каждого на страницу.

Ошибка: возникла перекрестная ошибка. React не имеет доступа к фактическому объекту ошибки в разработке. См. *** для получения дополнительной информации.

Answer 1

Прежде всего вы должны изменить this.state = {tileData: {}, ...} на this.state = {tileData: [],...}.

Ваши первые строки должны выглядеть следующим образом:

constructor(props) {
super(props);
this.state = { tileData: [], dataLoaded: false };
}

Answer 2

Ваше начальное состояние tileData является объектом. Вы не можете forEach или map над объектом, но это то, что вы просили сделать код. Он попытается перебрать это свойство состояния на первом рендере, который, вероятно, и является этой ошибкой.

Изменить

this.state = { tileData: {} }

на

this.state = { tileData: [] }

, а затем добавитьусловие для вашего рендера, чтобы вернуть что-то еще, если массив пуст, что-то вроде:

render() {
  if (!this.state.titleData.length) return <div>No data</div>
  return this.state.tileData.map(tile => etc
}