Question

我正在尝试映射一个数组，即静态json数据。由于出现此错误，因此无法映射，因为this.props.movies.map不是函数。以下是带有App.js的Table组件的代码。因为json文件中的对象是电影。正如我在获取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>
    );
  }
}

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;

Answer 1

问题是您的数据包含电影数组。因此，在初始化状态时，需要为电影分配data.movies。请检查以下一项以获得更好的理解

1.239%

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

1 个答案: