反應。 如何將setState中的鍵與數組索引一起使用？

Question

所以，這是我的代碼。 我有一個簡單的問題，關於如何將state元素與indexin key ？ 在這種情況下，我需要為不同的data索引元素設置不同的值。

import React, { Component } from 'react';
import {Doughnut} from 'react-chartjs-2';

class Chart extends Component {
    constructor(props) {
        super(props);

        this.state = {
            labels: ["All", "Done", "Active"],
            datasets: [{
                label: "Todos",
                backgroundColor: 'grey',
                borderColor: 'green',
                data: [0, 0, 0]
            }]
        };
    }

    getTodosList = (todos) => {
        const all = [];
        const active = [];
        const done = [];

        todos.filter(todo => {
            if (todo.status === 'active') {
                active.push(todo);
            } else if (todo.status === 'all') {
                all.push(todo);
            } else if (todo.status === 'done') {
                done.push(todo);
            }
        });

        this.setState({
            datasets[0].data[0]: all, // error
            datasets[0].data[1]: active, // error
            datasets[0].data[2]: done // error
        });
    }

Answer 1

這很簡單：

this.setState({
    datasets: [...this.state.datasets,
        {
            data: [all.length, active.length, done.length]
        }
    ]
});

開始像Redux那樣思考。 使用純函數。 它會為您提供幫助。 我也根據您的開始data理解-您可能需要使用items的length ...

Answer 2

setState函數不知道必須用代碼替換哪個對象。 您也沒有正確訪問數據集變量，應該是this.state.datasets 。 您可以執行以下操作：

let datasets = this.state.datasets.slice();
datasets[0].data[0] = all;
datasets[0].data[1] = active;
datasets[0].data[2] = done;
this.setState({datasets});