Javascript 如何在React函数和更改时重新渲染之间共享状态

我有一个react组件，它用复选框和图表呈现表单（Victory）。我希望组件在图中显示活动的复选框（每个复选框都有自己的api url，为简单起见，下面的代码显示无用的数据和不获取）。此代码中存在多个问题：

1） 从console.log的角度来看，activestock状态似乎总是落后一步，在控制台中，它显示的是以前的状态，而不是数组的实际内容。但是在React-Dev工具中，它正确地显示了activestock

2） 即使VictoryChart的道具（即activestock）发生变化，VictoryChart也不会重新呈现，即使我可以在React-Dev工具中看到存在多个VictoryLines组件。这就像父母不会在状态更改时重新播放一样，但我认为通过在道具中传递状态，可以在组件之间共享状态

3） 因为钩子会重新命名组件，所以单击复选框时不会显示复选框

下面是一个沙盒链接：

import React，{useState，useffect}来自“React”
从“react引导/卡”导入卡；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“victory”导入{VictoryLine，VictoryChart}；
导出默认功能家庭卡（道具）{
常量[activestock，setActiveStock]=useState（[]）
功能性手把手（道具）{
如果（activestock.includes（道具）==false）{
setActiveStock（[…activestock，道具]）
console.log（activestock）
} 
否则{
setActiveStock（activestock.filter（activestock=>activestock！==props））
console.log（activestock）
}
}
功能线（道具）{
常量图表=[]
if（props.chart！==未定义）{
道具.图表.地图（函数（val，索引）{
图表。推送(
)
})
返回图表
}  
返回空
}
功能图（道具）{
返回(
)
}
功能表（道具）{
常数hg=[]
props.text.map（函数（val，index）{
推(
{val}handleActiveStocks（val）}/>{index}
)
})
返回值（hg）
}
返回(
美国股票
{/* 
*/}
)
}

要选中复选框，您需要一个

已选中={some_value_here}

import React，{useState，useffect}来自“React”；
从“反应引导/卡”导入卡；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“victory”中导入{VictoryLine，VictoryChart}；
导出默认功能家庭卡（道具）{
const[activestock，setActiveStock]=useState（[]）；
功能性手把手（道具）{
如果（activestock.includes（道具）==false）{
setActiveStock（[…activestock，道具]）；
console.log（activestock）；
}否则{
setActiveStock（activestock.filter（activestock=>activestock！==props））；
console.log（activestock）；
}
}
功能线（道具）{
常数图=[]；
if（props.chart！==未定义）{
道具.图表.地图（函数（val，索引）{
图表。推送(
);
});
收益表；
}
返回null；
}
功能图（道具）{
返回(
);
}
//useffect（）
功能表（道具）{
常数hg=[]；
props.text.map（函数（val，index）{
console.log（activestock）
//检查activeStock中是否存在该值
已检查常量=活动库存。包括（val）；
推(
{val}{”“}
handleActiveStocks（val）}/>{“}
{index}
);
});
返回汞；
}
返回(
美国股票
{/* 
*/}
);
}

共享状态没有错误，您只需要在返回它之前添加必要的检查