javascript—var的计算值不影响react中的饼图

kiayqfof  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(329)

下面是计算两个值的代码,即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;

饼图显示将圆切成两半的确切形状。
您能告诉我原因以及如何输入计算变量的值吗?

oxalkeyp

oxalkeyp1#

这里的问题是,您将值存储在非状态变量的变量中,react不监视这些变量的更改,并且在其值更改时重新渲染。
因此,创建两个单独的状态或一个状态对象,如:

const [chartData,setChartData] = useState({memorizeNum: 0, notMemorizeNum : 0});

然后在计算逻辑下设置新数据,如:

setChartData({ New data here });

然后将这些数据传递给图表,如:

data={[{ id: "finish", value: chartData.memorizeNum }, { id: "notFinish", value: chartData.notMemorizeNum }]}

它会起作用的。

相关问题