开发者问题收集

React.JS,TypeError:this.state.movi​​es.map不是一个函数问题

2019-11-20
317

// 我英文不好,请谅解。

当您尝试通过从api接收数据来使用地图时,由于类型错误而发帖寻求解决方案。

我写的代码有什么问题?

.then(data =>
        This.setState({
          movie: data.boxOfficeResult,
          List: data.boxOfficeResult.dailyBoxOfficeList,
          Date: data.boxOfficeResult.ShowRange,
          Type: data.boxOfficeResult.box OfficeType
        })
      );

是这个原因吗?

我正在练习如何使用api。很难。

class MoviesCall extends React.Component {
  state = {
    movies: [],
    list: [],
    Date: "",
    Type: ""
  };

  componentDidMount = async () => {
    await axios
      .get(endPoint)
      .then(res => res.data)
      .then(data =>
        this.setState({
          movies: data.boxOfficeResult,
          list: data.boxOfficeResult.dailyBoxOfficeList,
          Date: data.boxOfficeResult.showRange,
          Type: data.boxOfficeResult.boxofficeType
        })
      );
    console.log(this.state.movies);
    console.log(this.state.list);
    console.log(this.state.Date);
    console.log(this.state.Type);
  };

  render() {
    return (
      <div>
        {this.state.movies.map(movie => (
          <div key={movie.id}></div>
        ))}
      </div>
    );
  }
}
3个回答

您可能忽略了数据未完成加载的情况。此时您的 render 函数应如下所示:

render() {
  const { movies } = this.state;

  if (!movies || !Array.isArray(movies))
     return null;

  return (
      <div>
        {movies.map(movie => (
          <div key={movie.id}></div>
        ))}
      </div>
    );
}
Duc Hong
2019-11-20

从这个区块我发现了 3 个问题

1) This 应该是 this

2) movie 应该是 movies

3) List 应该是 list

.then(data =>
        This.setState({
          movie: data.boxOfficeResult,
          List: data.boxOfficeResult.dailyBoxOfficeList,
          Date: data.boxOfficeResult.ShowRange,
          Type: data.boxOfficeResult.box OfficeType
        })
      );
tareq aziz
2019-11-20

在设置状态之前,请在控制台中记录数据并查看它是否为数组。您使用的是“This”吗?应该是“this”

.then(data =>
        console.log(data)
        this.setState({
          movie: data.boxOfficeResult,
          List: data.boxOfficeResult.dailyBoxOfficeList,
          Date: data.boxOfficeResult.ShowRange,
          Type: data.boxOfficeResult.box OfficeType
        })
      );
RenJith
2019-11-20