只有最后一个列表项在 React 中呈现

Question

我是 React 和 API 的新手。 我的问题是，当我从 API 返回一些数据时，将其添加到状态数组中，遍历该数组并生成该数组中每个项目的列表元素（通过 generateList() 函数），我只得到最后一个列表项目，即使它映射超过 1 个项目。

state = { movies: [] };

onTermSubmit = async (term) => {

    //requests

    }).then((response) => {

        for (let i = 0; i<response.data.results.length; i++) {

            this.setState({movies: [{
                id: response.data.results[i].id, 
                title: response.data.results[i].title
            }]})
        }
        this.generateList();
    });
}

generateList = () => {
    return(
    this.state.movies.map(item => (
        <li key={item.id}>{item.title}</li>)
    ))
}

render() {
    return (
    <div className="ui container"> 
        <SearchBar onTermSubmit={this.onTermSubmit} /> 
        // the Results component is an <ul> element
        <Results generateList={this.generateList()} />
    </div>
    )
}

就目前而言，当我在数组上运行.map function 并返回它时，我只得到最后一个列表项。 我想收到整个列表并将其传递给结果组件。

Answer 1

它与您如何解析 API 调用的结果有关：

 for (let i = 0; i<response.data.results.length; i++) {

        this.setState({movies: [{
            id: response.data.results[i].id, 
            title: response.data.results[i].title
        }]})
    }

在这里，您循环您的结果并使用项目结果的信息覆盖 state 中的movies 。这将导致您只看到最后一个结果。

怎么样：

}).then((response) => {
        this.setState({movies: response.data.results.map(item => ({
            id: item.id, 
            title: item.title
        })})
});

Answer 2

您为获得的每个结果覆盖 state 中的电影 object，因此只有最后一个电影被添加到 state。 阅读本文以获取有关在state 中管理 arrays的更多信息。

这是一种正确的方法：

const movies = response.data.results.map(result => ({
  id: response.data.results[i].id,
  title: response.data.results[i].title
}));
this.setState({ movies });

Answer 3

我在这里看到的问题很少，它呈现了你的最后一个元素，因为你用then()中的每个 setState 覆盖了先前的元素。

我还建议不要将方法调用为Results generateList属性，而是将渲染元素作为子元素传递。 如果您有任何问题随时问。 我写得很快，所以可能因为一些拼写错误/语法而无法编译。

state = { movies: [] };

onTermSubmit = async (term) => {
    //requests

}).then((response) => {

    const movies = response.data.results.map((movie) => {
       return {
         id: movie.id,
         title: movie.title
       }
    })

    this.setState({ movies })
 }

generateList = () => {
   return(
       this.state.movies.map(item => (
       <li key={item.id}>{item.title}</li>)
    ))
}

render() {

    return (
    <div className="ui container"> 
        <SearchBar onTermSubmit={this.onTermSubmit} /> 
        // the Results component is an <ul> element
        <Results>
            {this.generateList()}
        </Results>
    </div>
    )
}

Answer 4

您对 setState 的调用只是将 movies: 设置为循环中每次包含 1 个项目的数组，本质上会覆盖上一个电影。

在行尾的 generateList function (an extra ')' 中也存在语法错误

)

 this.setState({movies: response.data.results});

应该做的伎俩

Answer 5

您无需遍历 http 请求的结果。 您可以执行以下操作：

this.setState({ 电影: response.data.results);