Reactjs 设置数组对象的状态

出于某种原因，与简单的设置状态进行斗争

   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>

this.state={
舞者：[{姓名：“舞者1”，得分1:10，得分2:8，得分3:7，总得分0}，
{姓名：“舞者2”，得分1:5，得分2:7，得分3:8，总得分0}，
{名称：“舞者3”，得分1:6，得分2:6，得分3:7，总得分0}，
{姓名：“舞者4”，得分1:9，得分2:5，得分3:6，总得分0}，
{名称：“舞者5”，得分1:8，得分2:8，得分3:7，总得分0}，
{姓名：“舞者6”，得分1:10，得分2:9，得分3:10，总得分0}，
{姓名：“舞者7”，得分1:6，得分2:10，得分3:9，总得分0}，
{名称：“舞者8”，分数1:8，分数2:4，分数3:6，总分数：0}，]
}
}
计算核心（）{
const dancers=this.state.dancers；
舞者。地图（舞者=>{
返回这个.setState（{dancer，totalScore:10}）；
})
}
this.calculateScore（）}>进入前8名

---

现在我只想找出为什么totalScore不更新。

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

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

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

---

因此，您将拥有一个处理舞者数组的

Dancers

组件，然后呈现多个

Dancer

组件，每个组件都基于自己的本地道具计算总存储。

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

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

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

---

因此，您将拥有一个处理舞者数组的

Dancers

组件，然后呈现多个

Dancer

组件，每个组件都基于自己的本地道具计算总存储。

当您执行

this.setState（{Dancer，totalScore:10}）时它在如下结果的状态下创建
舞者

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 })

当您执行
this.setState（{dancer，totalScore:10}）时它在如下结果的状态下创建
舞者

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 })