javascript - 做出反应。如何将 setState 中的键与数组索引一起使用?
问题描述
所以,这是我的代码。我有一个简单的问题,关于如何将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
});
}
解决方案
这很简单:
this.setState({
datasets: [...this.state.datasets,
{
data: [all.length, active.length, done.length]
}
]
});
开始像 Redux 那样思考。使用纯函数。它会帮助你。另外,我根据您的开始了解data
- 您可能需要使用length
您的items
...
推荐阅读
- python - 我想从数据集中删除所有德语停用词
- angular - 在子组件中等待 API 时的角度“加载”
- regex - 如何在 VB.net 的 DataSet.Tables.Select() 中使用正则表达式
- sql - 仅在 VoltDB 中更新必要的字段
- python - Plotly fig.show() 给出 TypeError: 'NoneType' object is not callable
- reactjs - 如果文本很长,则在悬停时 React 'react-data-table-component' 不显示工具提示
- asp.net-core-mvc - 无法使用数据播种数据库
- excel - 如何在excel中按升序对一行中不同长度的单词进行排序?
- react-native - 来自 URL 的 PNG 图像未在本机 android 4.4.2 中显示
- c# - “不能重复使用 obectpool 中的子弹。”