Question

我当前在表单中使用useState。在我的表单中，我具有在输入中使用的不同功能。每种类型的输入都有不同的功能。这是我的功能

useEffect(() => {
    console.log('change');
  }, [MAINOBJECT]);

  const handleMainBasicChange = (e, resultsEnabled = 0) => {
    const { name, value } = e.target ? e.target : e;
    setMAINOBJECT(object => {
      return {
        ...object,
        [name]: resultsEnabled
          ? {
              results: value
            }
          : value
      };
    });
  };

  const handleCalendarChange = (name, value) => {
    setMAINOBJECT(object => {
      const nameField = value
        ? moment(value).format('YYYY-MM-DD[T08:00:00Z]')
        : null;
      return {
        ...object,
        [name]: nameField
      };
    });
  };

  const handleEventPeoplePickerChange = (name, valueArg, multiple = 0) => {
    console.log(MAINOBJECT);
    // let realValue;
    // if (multiple) {
    //   realValue = valueArg ? valueArg : [];
    //   targetObject[name] = { results: realValue };
    // } else {
    //   realValue = valueArg ? valueArg : 0;
    //   targetObject[name] = realValue;
    // }
    // setMAINOBJECT(targetObject);
  };

这是我的useState

const [MAINOBJECT, setMAINOBJECT] = useState(INITIALSTATE.IpetMainObject);

现在我的问题是，使用“ setMAINOBJECT”设置状态没有问题，但是当我尝试使用其他两个其他功能进行一些更改后使用“ handleEventPeoplePickerChange”功能时，MAINOBJECT会以某种方式重置为初始状态控制台中显示的状态。

在我的handleEventPeoplePickerChange中执行console.log之后，这是显示的值。在我尝试在被诅咒的函数中进行console.log之前，MAINOBJECT具有标题和状态值

Answer 1

与其从状态复制对象，然后就地修改它，不如尝试使用setState的功能形式：

const handleMainBasicChange = (e, resultsEnabled = 0) => {
  const { name, value } = e.target ? e.target : e;

  setMAINOBJECT(object => {
    return {
      ...object,
      [name]: resultsEnabled ? {
        results: value
      } : value
    }
  });
};

const handleCalendarChange = (name, value) => {
  setMAINOBJECT(object => {
    const nameField = value ? moment(value).format('YYYY-MM-DD[T08:00:00Z]') : null
    return {
      ...object,
      [name]: nameField
    }
  });
};

执行let targetObject = { ...MAINOBJECT };只会创建对象的浅表副本，因此您仍然可能直接改变状态。

useState返回初始状态

1 个答案: