Javascript 在react应用程序中映射对象数组时出错

我试图映射一个数组，即静态json数据。无法映射，因为我收到错误，因为this.props.movies.map不是函数。下面是带有App.js的表组件的代码。因为json文件中的对象是movies.as，所以我遵循了获取api的相同步骤，但能够获取数据

从“../src/data.json”导入数据

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: data,
    }
  }

  render() {
    return (
      <div className="App">
        <Header />
        <Table movies={this.state.movies} />
      </div>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
电影：数据，
}
}
render（）{
返回(
);
}
}

Table.js

import React, { Component } from 'react';
import './Table.css';
import { list } from 'postcss';

class Table extends Component {
    constructor(props) {
        super(props);
        this.state = { }
    }

    render() {
        const list = this.props.movies.map((movie) => (   
                <tr key={movie.Title}>
                    <td>{movie.Title}</td>
                    <td>{movie.Director}</td>
                </tr>
            )
         );

        return (
            <div className="table">
                table
               <table>
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Director</th>
                        </tr>
                    </thead>
                    <tbody>
                        {list}
                    </tbody>
                </table>

            </div>
        );
    }
}

export default Table;

import React，{Component}来自'React'；
导入“/Table.css”；
从“postss”导入{list}；
类表扩展组件{
建造师（道具）{
超级（道具）；
this.state={}
}
render（）{
const list=this.props.movies.map（（电影）=>）
{movie.Title}
{电影导演}
)
);
返回(
桌子
标题
经理
{list}
);
}
}
导出默认表；

问题在于您的数据包含电影阵列。因此，在初始化状态时，需要将data.movies分配给movies。检查下面的一个以便更好地理解

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: data.movies,
    }
  }

  render() {
    const { movies } = this.state;
    return (
      <div className="App">
        <Header />
        {movies.length === 0 ? <h1>Loading Movies</h1> : <Table movies={this.state.movies} />}
      </div>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
电影：数据电影，
}
}
render（）{
const{movies}=this.state；
返回(
{movies.length==0？正在加载电影：}
);
}
}

数据是什么？在不知道数据的情况下，你怎么能指望我们帮助你呢。请将数据共享到一个json文件，如{“movies”：[{“Title”：“Django Unchained”，“Year”：“2012”，“Rated”：“UNRATED”，“Released”：“2012年12月25日”，因此您必须将data.movies分配到如下状态。state={movies:data.movies，}如果根键为“movies”，那么它应该是这个。state.movies.movies（data.movies）。我说的对吗？this.state={movies:data.movies，}这个工作为什么const{movies}=this.state；在rendery中是必需的；您也可以像这样直接访问.state.movies，但是有const{movies}=this.state含义有助于重用您无需每次都调用this.state.movies，这是ES6的一部分。它对道具和eg const{data}=this.props的工作方式相同；如果我的答案解决了您的问题，也请您投票支持我的答案。