设置数组对象的状态

Question

出于某种原因，正在努力使用简单的 setState。

   this.state = {
            dancers: [{name: "Dancer1", score1: 10, score2: 8, score3: 7, totalScore: 0},
            {name: "Dancer2", score1: 5, score2: 7, score3: 8, totalScore: 0},
            {name: "Dancer3", score1: 6, score2: 6, score3: 7, totalScore: 0},
            {name: "Dancer4", score1: 9, score2: 5, score3: 6, totalScore: 0},
            {name: "Dancer5", score1: 8, score2: 8, score3: 7, totalScore: 0},
            {name: "Dancer6", score1: 10, score2: 9, score3: 10, totalScore: 0},
            {name: "Dancer7", score1: 6, score2: 10, score3: 9, totalScore: 0},
            {name: "Dancer8", score1: 8, score2: 4, score3: 6, totalScore: 0},]
        }
    }
    calculateScore() {
        const dancers = this.state.dancers;
        dancers.map(dancer => {
           return this.setState({dancer, totalScore: 10});
        })
    }
<Link to={{ pathname: "/top8" }} ><button className="create-button" onClick={() => this.calculateScore()}>Make Top 8</button></Link>

现在我只想知道为什么totalScore不更新。

Answer 1

您不应该修改状态来对现有状态进行一些计算。如果可能，推导您所在州的价值，如下所示：

calculateScore() {
    const dancers = this.state.dancers;
    const dancersWithTotal = dancers.map(dancer => {
        return { ...dancer, totalScore: 10 }
    })
    return dancersWithTotal
}

一个更好的解决方案是为单个舞者渲染一个单独的组件并在那里计算总分。这更符合 React 最佳实践，其中每个组件应该只做一件事。

所以你会有一个 Dancers 组件来处理舞者数组，然后呈现多个 Dancer 组件，每个组件根据自己的本地道具计算总商店。

Answer 2

当您执行 this.setState({dancer, totalScore: 10}); 时，它会创建 dancer 结果如下所示的状态

this.state = {
   dancers: [{name: "Dancer1", score1: 10, score2: 8, score3: 7, totalScore: 0},
            {name: "Dancer2", score1: 5, score2: 7, score3: 8, totalScore: 0},
            {name: "Dancer3", score1: 6, score2: 6, score3: 7, totalScore: 0},
            {name: "Dancer4", score1: 9, score2: 5, score3: 6, totalScore: 0},
            {name: "Dancer5", score1: 8, score2: 8, score3: 7, totalScore: 0},
            {name: "Dancer6", score1: 10, score2: 9, score3: 10, totalScore: 0},
            {name: "Dancer7", score1: 6, score2: 10, score3: 9, totalScore: 0},
            {name: "Dancer8", score1: 8, score2: 4, score3: 6, totalScore: 0},]
    dancer: {name: "Dancer8", score1: 8, score2: 4, score3: 6, totalScore: 0},
    totalScore: 10,
}

所以你应该像下面那样做，

    const calculatedDancers = dancers.map(dancer => {
         return { ...dancer, totalScore: 10 }
    })
    this.setState({ dancers: calculatedDancers })

设置数组对象的状态

Setting state of array objects

setstate

reactjs