Question

我目前正在使用MERN堆栈创建完整的堆栈应用程序，但遇到了以前没有的问题。当我使用.map()函数遍历数组时，即使控制台也会记录我的数组存在，长度为4并具有所有适当的元素（它们是对象）），.map()函数不会迭代我的数组。

我还注意到，在控制台日志array.length时，我得到的是零-尽管在上一个日志中，我被告知该数组的长度为4（应该是长度）。

下面是我填充数组的位置：

getTournaments(){
        fetch("http://localhost:3001/tournament", {
            credentials: 'include',
            method: "get",
            headers: {
                'Accept':'application/json',
                'Content-Type': 'application/json',
            }
        })
        .then( (response) => response.json())
        .then( (response) => {
            if(response){
                response.map((tournament)=> {
                    this.state.tournaments.push(tournament);
                })
            }
        })
    }

我在这里致电getTournaments()：

componentDidMount(){

        this.getTournaments(); ...

这是我尝试映射到数组上的方式：

this.state.tournaments.map((tournament,index) => {
   return (<div key={index}> {tournament.title} </div>);
})

最后，当我调用渲染函数时，会创建控制台日志。这是渲染功能：

renderSpectatorView(){
        var array = [1,2,3];
        var currentTournaments = this.state.tournaments;
        // console.log(currentTournaments);
        return(
            <div className="page-wrapper">

                            {/* BOOTSTRAP MODAL */}
            {this.state.isAuth ? <Button onClick={this.goToCreate} bsStyle="primary">Create Tournament</Button> : null}
            <div className="tournament-wrapper">
                     {  
                        console.log(this.state.tournaments)}
                       { console.log(this.state.tournaments.length)}

            </div>
            </div>
        );
    }

在项目的早期，我使用了几乎相同的方法（但由于我遍历了数组中每个对象的属性而变得更加复杂），所以我为为什么这种方法不起作用而感到困惑。我最初的想法是，也许在我从API提取数据之前调用了render函数-但是这些值正确记录了。

我应该使用promise还是async / await来实现这一点，以便确保仅在收集数据后才渲染？感谢您提供的所有帮助。

Answer 1

问题是this.state.tournaments.push(tournament);

如果要触发更新，则必须使用setState。做类似的事情

.then( (response) => {
    if(response){
        this.setState({tournaments: [...this.state.tournaments, ...response.tournaments]});
    }
})

蔓延是因为您似乎想保留this.state.tournaments中的值，但我不确定。如果只设置一次，就可以简单地做

.then( (response) => {
    if(response){
        this.setState({tournaments: response.tournaments});
    }
})

有关更多信息，请参见此处ReactJS Docs: Do Not Modify State Directly

简而言之；您可以在没有setState的情况下从不修改状态，不能执行this.state.thing = X，不能执行this.state.thing.push()或其他任何操作。修改state的唯一方法是使用setState。

为什么React将我的数组当作空数组对待？

1 个答案: