Question

我很难在嵌套对象中使用外部变量状态。

例如，假设我有这两种状态：

const [type, setType] = useState('line');
const [options, setOptions] = useState({
id: 1,
chart: {
  events: {
    load: function () {
      let btn = document.getElementsByClassName('btn');
      let chart = this;
      for(let btntmp of btn) {
        if(btntmp.id=='area' || btntmp.id=='pie' || btntmp.id=='bar' || btntmp.id=='line' || btntmp.id=='column') {
          btntmp.addEventListener('click', () => {
            Type = btntmp.id;
            //setType(Type);
          //  
          
          for(let i=0;i<chart.series.length;i++) {
            chart.series[i].update({ type: Type});
          }
          });
          chart.redraw();
        }

       
      }   
    },
  },
  type: type,
},});


setType('bar');
useEffect(() => {

console.log(options.chart.type); ---> prints 'line'

if (type == 'pie') {
  console.log('its pie');
  setEndPeriodSelected(null);
  setShown(false);
} else {
  setShown(true);
  
}    
},[type]);

在运行代码时，type将获得默认值“ line”，并且在调用setType时，类型会更改，但options.chart.type不会获得新值。

我已经想出了一种扩展选项的解决方案，然后只需使用setOptions（）更改其类型即可。但是不是仅通过更改类型就可以直接更改吗？

期待获得帮助。

Answer 1

我认为没有必要重复数据。删除type对象中的chart键。

无论如何，您可以在useEffect中设置选项：

useEffect(() => {

  setOptions({...options, chart: {...options.chart, type}};

  // ... your code ... //

},[type]);

React无法将一个变量的更改引用到嵌套对象中的另一个变量

1 个答案: