如何使用 React Hook useState 更新 2 个对象

Question

我的第一个对象

 const [message, setMessage] = useState({ 
      Features: {Active:false},
      General: {FileTimeout:0,ZipDepth:0}
  });

如何更新这个对象？

 const handleInput=e=>{
    const name=e.currentTarget.name;
    const value=e.currentTarget.value;

    var temp = {...message}


    if(name == 'active'){
     if(value==='on'){
      temp.Features.Active=true;
     }
     else{}
    } 
    else if(name == 'timeout'){
       temp.General.ZipDepth= 5;
    } 
    else if(name == 'zipdepth'){
     temp.General.FileTimeout= 7;
    }
  }

  New Values= { Features :{Active:true}, General: {FileTimeout:7,ZipDepth:5}});

如何更新这样的值？如果有图书馆什么的，我也可以用。

Answer 1

const [message, setMessage] = useState({ 
      Features: {Active:false},
      General: {FileTimeout:0,ZipDepth:0}
  });

const handleInput=e=>{
    const name=e.currentTarget.name;
    const value=e.currentTarget.value;

    var temp = {...message}


    if(name == 'active'){
     if(value==='on'){
      temp.Features.Active=true;
     }
     else{}
    } 
    else if(name == 'timeout'){
       temp.General.ZipDepth= 5;
    } 
    else if(name == 'zipdepth'){
     temp.General.FileTimeout= 7;
    }

    setMessage({...temp})  // You need to call setMessage function in order to update the state.
  }

Answer 2

您正在改变您的状态对象。即使您创建了 message 状态的副本 temp，您也在改变嵌套属性。您还必须浅复制您正在更新的所有嵌套状态。

我建议使用功能状态更新来访问上一条消息state, and use aswitchstatement to cover the different cases on thename` 值，为每个消息返回下一个状态值。请注意，嵌套状态的每个级别在更新之前都是浅复制的。

const [message, setMessage] = useState({ 
  Features: { Active: false },
  General: { FileTimeout: 0, ZipDepth: 0 }
});

const handleInput=e=>{
  const { name, value } = e.currentTarget;

  setMessage(message => {
    switch(name) {
      case 'active':
        if (value === 'on') {
          return {
            ...message, // shallow copy of state
            Features: {
              ...message.Features, // shallow copy nested state
              Active: true,
            },
          };
        } else {
          // ? return some new state
        }

      case 'timeout':
        return {
          ...message, // shallow copy of state
          General: {
            ...message.General, // shallow copy nested state
            ZipDepth: 5,
          },
        };

      case 'zipdepth':
        return {
          ...message, // shallow copy of state
          General: {
            ...message.General, // shallow copy nested state
            FileTimeout: 7,
          },
        };

      default:
        return message; // no update, return current state
    };
  });
}

如何使用 React Hook useState 更新 2 个对象

How do I update 2 objects with React Hook useState

reactjs

react-hooks

react-state