ReactJS: Почему перемещение значений в состояние в объекте удаляет данные?

Question

Я настроил пару полей ввода, где значение входит в объект 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;

Answer 1

Вы делаете это совершенно неправильно.

1. Не следует создавать столько состояний, если они связаны друг с другом. Вы можете создать одно состояние и обновить несколько значений.
2. Вы не можете установить SetState с измененными данными. Вы должны клонировать его перед установкой снова. Используйте destructure для клонирования

Пример приведен ниже:

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;

Если у вас есть такие сложные логики c. Создайте редуктор (используйте редуктор), чтобы упростить его.

Answer 2

Я бы посоветовал вам попытаться использовать методы set для этих состояний, а не напрямую изменять состояние.

mediaArray[index] = {
      ...mediaArray[index],
      ['input1']: value,
    };
// instead of using this, try 
   setMediaArray((state) => {
      state[index].input1 = value
      return state
   })

Я не привык к функциональным компонентам, но в соответствии с обычным сценарием это должно работа.