javascript - 状态改变但不渲染

问题描述

当一个元素添加到我的列表中时，我想在单击时呈现一个设置菜单，并在一个处于活动状态时禁用所有其他设置菜单。我还有一个处于不同状态的示例元素，并且希望在它打开时停用所有设置菜单，如果设置菜单打开，则将其禁用。我将所有元素的设置状态存储在一个数组中，并且在我的更新函数中，我的设置状态的副本正在更改，但我的实际设置状态没有。我认为这与我的使用效果有关，当我将其注释掉时，我的设置状态确实发生了变化，但没有呈现。在我映射我的图表数据之前它正在工作，但我不确定是什么导致它停止工作，因为注释掉它仍然不会呈现设置。

const [settings, setSettings] = useState([]);
const [sampSettings, setSampSettings] = useState(false);

const updateSettings = (val, index) => {
if(val){
    let copySettingsFalse = [...settings]
    copySettingsFalse[index]=false;
    return setSettings(copySettingsFalse);
}
let copySettingsTrue = settings.fill(false);
copySettingsTrue[index] = true;
console.log(copySettingsTrue)
return setSettings(copySettingsTrue);

};

useEffect(() => {
if (stockList.length>0){
stockList.map((val,index) => {
  // Chart
  setLineData([
    ...lineData,
    {
      labels:trimLineDataHistory[index],
      datasets: [
        {
          label: val.Tick,
          data: trimLineDataHistory[index].reverse(),
          pointRadius: 0,
          fill: false,
          backgroundColor: day ? "#e9dfd4" : "#141e28",
          borderColor: "#52ad59",
        },
      ],
    },
  ]);
  // Settings
  setSettings([...settings, false]);
})}
  return;
},[stockList]);

// Settings
// useEffect(() => {
//   if (settings.includes(true)) {
//     setSampSettings(false);
//   }
//   if (sampSettings === true) {
//     setSettings(settings.fill(false));
//   }
//   return;
// }, [settings,sampSettings]);

  if(stockList.length>1)
  return(
  <>
  {stockList.map((val, index) => {
   const { Tick, Name } = val;
   return(
   <div className="stockItemIcon">
        <BsFillGearFill
         className="gearIcon"
         onClick={() => updateSettings(settings[index], index)}></BsFillGearFill>

             
        <div className={settings[index]?
        (day?"settingsContainerAlt showSettings daySettings":"settingsContainerAlt showSettings nightSettings")
       :(day?"settingsContainerAlt hideSettings daySettings":"settingsContainerAlt hideSettings nightSettings")}>

            </div>)}
            </>)

标签： javascriptreactjs

javascript - 状态改变但不渲染

问题描述

解决方案

推荐阅读