Почему ошибка в React приложении и не отображается список на странице?

Question

[georgedubinsky8888]

Здраствуйте! Есть код приложения написаного на React-е. Само приложение отображает список людей, также можно отфильтровать список кнопками или поисковым инпутом. Хочу научиться делать такие же приложения, а чтобы научиться стараюсь повторить реализацию....Я немножко изменил названия масивов и свойства в обьектах в файле today.json чтобы был список актеров и актрис. Для начала нужно хотя бы вывести список на страницу, а создавать фильтры буду позже, но у меня ошибка и список не отображается...
Вот песочница готового приложения:
https://codesandbox.io/s/eloquent-feather-dgwrq

А вот мой код:
Index.js:

import React from "react";
import ReactDOM from "react-dom";
import Content from "./Content.js"


class App extends React.Component {
    
state ={
    data:[]
}
    
componentDidMount(){
    this.fetchData();  
}
    
fetchData = async () =>{
    const response = await fetch('data/today.json');
    const data = (await response.json()).body;
    console.log(data);
    this.setState({data:data});
    console.log(data);
}
    render(){
        return(
            <div>
            <Content data={this.state.data}/>
            </div>
        );   
    }
}
            
ReactDOM.render(<App />, document.getElementById('root'));

Content.js:

import React from "react";

export default ({ data }) => (
  <table className="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Film</th>
      </tr>
    </thead>
    <tbody>
      {data.map(item => (
        <tr key={item.name}>
          <td>{item.name}</td>
          <td>{item.age}</td>
          <td>{item.film}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

и мой today.json:

spoiler

{
  "body": {
    "actor": [
      {
       "name": "Will Smith",
       "age": 51,
       "film": "Hancock"
      },
      {
       "name": "Brad Pitt",
       "age": 55,
       "film": "Ocean's Twelve"
      },
      {
       "name": "Zac Efron",
       "age": 32,
       "film": "17 Again"
      }
      
    ],
    "actress": [
      {
       "name": "Catherine Zeta-Jones",
       "age": 50,
       "film": "The Terminal"
      },
      {
       "name": "Sandra Bullock",
       "age": 55,
       "film": "Speed"
      },
      {
       "name": "Emma Watson",
       "age": 29,
       "film": "Harry Potter"
      }
    ]
  }
}

Ошибка:


Я думаю возможно это связано с тем, что мои массивы находятся в обьекте и получается что мы не можем использовать для обьекта метод filter. Но тогда возникает вопрос: почему в готовом приложении это работает? Там так же в компонент Tabledata передается аргументом { data } без всяких проверок типа:

props.data.body && props.data.body.actor
      ? props.data.body.actor
      : props.data;

И все там работает... А почему у меня не работает? Ведь подход такой же использовал, код практически идентичный....Подскажите пожалуйста в чем проблема и как исправить ее...

Comments

[Петр Мухуров]

Если в готовом приложении все работает без ошибок, значит, в готовом приложении в data лежит массив

[georgedubinsky8888]

Петр Мухуров, так что исправить чтобы список отображался?

Answer 1

[Владимир]

А вот в этом месте консоль лог вставить не судьба ?
this.setState({data:data});
2) Ошибка говорит о том, что у тебя data которая находится в стейте не массив и не имеет метода map, прям красным по красному написанно, откуда ты взял что проблема с filter? Хотя этого метода у объекта тоже нет и с ним тоже будут проблемы.

Comments

[georgedubinsky8888]

так что исправить чтобы список отображался?

[Владимир]

georgedubinsky8888,
https://reactjs.org/tutorial/tutorial.html

[georgedubinsky8888]

Владимир, очень "умно", вы прям гений, я б до такого не додумался

[Владимир]

georgedubinsky8888, Вы ж хотите "...научиться делать такие же приложения, а чтобы научиться стараюсь повторить реализацию"
Если я напишу весь код, вы ничему не научитесь. Просто пройдите туториал, потому что сейчас до приложений вам очень далеко.

[georgedubinsky8888]

Владимир, ладно, не надо, я кажется уже нашел проблему

Answer 2

[Robur]

У вас в json - не массив, поэтому все и падает.
как исправить - либо переделать на массив, либо менять логику чтобы умела работать с тем что вы в json положили

Answer 3

[lnked]

у вас в массиве дата который вы вставляете в state хранится объект

{
  actor: [ ... ],
  actress: [ ... ],
}

в зависимости от того что вы хотите вывести вам надо изменять код

Вот так можно вывести всех подряд, актеров и актрис

{[...data.actor, ...data.actress].map(item => (
    <tr key={item.name}>
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.film}</td>
    </tr>
))}

или еще проще что бы компонент таблицы был более универсальным передавать в него уже собранные данные

render(){
  const { actor, actress } = this.state.data

  return(
    <div>
      <Content data={[...actor, ...actress]} />
    </div>
  );
}