Question

我正在尝试渲染一个简单应用的电影流派列表。数据以状态存储，但是在尝试呈现列表时什么也没有出现。这是组件：

import React from 'react';

class GetGenres extends React.Component {

    constructor(props) {
        super(props);
        this.state = {genres: []}
    }

    componentDidMount() {
        const genres = []
        const url = "https://api.themoviedb.org/3/genre/movie/list?api_key=XXXX&language=en-US"
        fetch(url)
        .then(response => response.json())
        .then(data => {
            for (let i = 0; i < 19; i++) {
            genres.push(data.genres[i].name)
                }
            })
            .catch(error => console.error(error))



        this.setState({genres: genres})
}




/*this.setState({genres: genres});*/


    render() {
        console.log(this.state.genres)
        return (
           <div className='genre-list'> 
           <h1>Genre's</h1>
            <ul>
                {this.state.genres.map((genre, i) => {
                    return <li key={i}>{genre}</li>
                })}
            </ul>

            </div> 
        )
    }
}

可能是一个非常简单的修复程序。预先感谢！

Answer 1

您setState在then之外，.then在您的.then(data => { for (let i = 0; i < 19; i++) { genres.push(data.genres[i].name) } this.setState({genres: genres}) })回调发生之前很久才执行。在内部执行

import numpy as np
def capsum(array,cap):
   capAdd = np.frompyfunc(lambda a,b:a+b if a < cap else b,2,1)
   return capAdd.accumulate(values, dtype=np.object)

values = np.random.rand(1000000) * 3 // 1

result = capsum(values,5)  # --> produces the result in 0.17 sec.

Answer 2

您需要在返回数据的Promise中移动this.setState（）部分。

什么都没有渲染，因为触发获取请求后，您的代码将继续运行并使用空数组调用setstate。

删除for循环，然后调用

this.setState({ genres: data.genres })

Answer 3

您正在对componentDidMount进行异步调用，这意味着promise解析处理程序中的代码将在您当前的this.setState调用之后执行。仅通过在promise处理程序中设置设置状态即可轻松解决此问题：

componentDidMount() {
  const genres = [];

  const url = "https://api.themoviedb.org/3/genre/movie/list?api_key=a2986eaf427243d1e89aafc1fc124089&language=en-US"

  fetch(url)
    .then(response => response.json())
    .then(data => {
      for (let i = 0; i < 19; i++) {
        genres.push(data.genres[i].name)
      }
      // Here you will have something to show...
      this.setState({genres: genres})
    })
    .catch(error => console.error(error));
}

动态列表未在React中呈现

3 个答案: