下面是计算两个值的代码,即MemorEnum和NotMemorEnum
getWordLength();
var memorizeNum = 0;
var notMemorizeNum = 0;
const getWordLength = () => {
data.map((item)=>{
if (item.user_word.memorize === true) {
memorizeNum = memorizeNum + 1
}
if (item.user_word.memorize === false) {
notMemorizeNum = notMemorizeNum + 1
}
})
console.log(memorizeNum) ----- gives 2
console.log(notMemorizeNum) ---- gives 4
}
因此,根据two console.log,它给出了两个数字,即2,4,这个值应该放在饼图中。这是rechart库的代码。
return (
<ResponsiveContainer width="100%" height="100%" >
<PieChart width={400} height={400}>
<Pie
dataKey="value"
isAnimationActive={false}
data={[{ id: "finish", value: memorizeNum }, { id: "notFinish", value: notMemorizeNum }]}
cx="50%"
cy="50%"
outerRadius={80}
fill="#8884d8"
label
/>
<Tooltip />
</PieChart>
</ResponsiveContainer>
)
所以var的两个值决定了饼图的形状,然而,我发现不管计算的变量值是多少,都会输入初始值。所以如果我设置初始值
var memorizeNum = 3;
var notMemorizeNum = 3;
饼图显示将圆切成两半的确切形状。
您能告诉我原因以及如何输入计算变量的值吗?
1条答案
按热度按时间oxalkeyp1#
这里的问题是,您将值存储在非状态变量的变量中,react不监视这些变量的更改,并且在其值更改时重新渲染。
因此,创建两个单独的状态或一个状态对象,如:
然后在计算逻辑下设置新数据,如:
然后将这些数据传递给图表,如:
它会起作用的。