javascript - ReactJS:为什么将值插入对象的状态会删除数据？

我已经建立了几个输入字段，其中值进入对象input，并且我试图将其与其他数据一起存储到新对象中，但是值消失了。

在我的handleSubmit函数上，我有setNewData(mediaArray)，它只是将mediaArray设置为一个新状态-它恰好可以正常工作，但是如果我将mediaArray包装到一个对象中：setNewData({mediaArray})，它将擦除数据。为什么这样做呢？

我最终尝试做到这一点：setNewData({...setSomeOtherInfo, mediaArray})这样我可以拥有：

newData = {
  info: '',
  description: '',
  mediaArray: [
    {
      input1: '',
      input2: '',
    },
    {
      input1: '',
      input2: '',
    },
    {
      input1: '',
      input2: '',
    },
  ]
}

零件：

const Screen = props => {

  const [someOtherInfo, setSomeOtherInfo] = useState({
    info: '',
    description: ''
  });
  const [mediaArray, setMediaArray] = useState([]);
  const [newData, setNewData] = useState(null);
  const [input, setInput] = useState({
    input1: '',
    input2: ''
  });

  const handleInput1 = (index, value) => {
    mediaArray[index] = {
      ...mediaArray[index],
      ['input1']: value,
    };
  };

  const handleInput2 = (index, value) => {
    mediaArray[index] = {
      ...mediaArray[index],
      ['input2']: value,
    };
  };

  const handleSubmit = () => {
    setNewData(mediaArray);
  };

  useEffect(() => {

  }, [newData]);

  return (
    <View>
      <TextInput onChangeText={e => handleInput1(index, e)} value={input.input1} />
      <TextInput onChangeText={e => handleInput2(index, e)} value={input.input2} />
    </View>
  );
};

export default Screen;

最佳答案

您做错了。


如果将它们链接在一起，则不应创建太多状态。您可以创建一个状态并更新多个值。
您无法使用突变数据设置状态。您必须先克隆它，然后再进行设置。使用分解克隆


示例如下：

const Screen = props => {
  const [mediaArray, setMediaArray] = useState([]);
  const [newData, setNewData] = useState(null);
  const [input, setInput] = useState({
    input1: "",
    input2: ""
  });

  const handleSubmit = (name, value) => {
    mediaArray[index] = {
      ...mediaArray[index],
      [name]: value
    };
    setMediaArray(mediaArray);
  };

  return (
    <View>
      <TextInput
        onChangeText={e => handleSubmit.bind(null, 'input1')(index, e)}
        value={input.input1}
      />
      <TextInput
        onChangeText={e => handleSubmit.bind(null, 'input2')(index, e)}
        value={input.input2}
      />
    </View>
  );
};

export default Screen;

如果您有如此复杂的逻辑。创建一个reducer（使用reducer）使其简单。