Установка состояния объектов массива - PullRequest
Новая
       3

Установка состояния объектов массива

0 голосов
/ 02 апреля 2020

Почему-то борется с простым 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 просто не обновляется.

Ответы [ 2 ]

1 голос
/ 02 апреля 2020

Когда вы делаете 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 })
1 голос
/ 02 апреля 2020

Вы не должны изменять состояние, чтобы выполнить некоторые расчеты по существующему состоянию. Если возможно, извлекает значение из вашего состояния следующим образом: 

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

Еще лучшим решением будет визуализация отдельного компонента для одного танцора и выполнение расчета общего количества. забить там. Это больше соответствует рекомендациям React, где каждый компонент должен делать только одно.

Таким образом, у вас будет компонент Dancers, который обрабатывает массив танцоров, а затем рендерит несколько компонентов Dancer, каждый из которых рассчитать общий магазин на основе собственных, местных реквизита.

...