React useState, значение ввода не обновляется

Question

Я буду sh генерировать входные данные на основе json, поэтому сначала я устанавливаю его в исходное состояние, затем в дочерний компонент enet Я хочу изменить его поле, дело в том, что компонент не обновляется ... Это рендерит один раз и не имеет представления, как сделать так, чтобы он обновлялся каждый раз, когда input onChange изменяет его значение. Любая идея, как заставить значение ввода обновляться каждый раз, когда я что-то набираю?

PARENT

 function App() {
      const [inputValue, setInputValue] = useState(chunkingRow);


  const handleChunkingChange = (e, index) => {
    let inputContent = inputValue;
    const reg = new RegExp(/^[0-9]+$/);

    if (e.target.value.match(reg)) {
      inputContent[index] = {
        ...inputContent[index],
        content: e.target.value,
      };

      setInputValue(inputContent);
      console.log(inputValue);
    } else console.log('not a number')
  };

  return (
    <div>
      <Wrapper>
        {Chunk(inputValue, handleChunkingChange)}
      </Wrapper>
    </div>
  );
}

CHILD

const Chunk = (inputValue, handleChunkingChange) => {

return(
  <div>
    {inputValue.map((el, index) => (
      <div key={index}>
        <p>{el.title}</p>
        {console.log(el.content)}
        <input
          type="text"
          onChange={(e, i) => handleChunkingChange(e, index)}
          value={el.content}
        />
      </div>
    ))}
  </div>
);
}

ссылка на демо https://codesandbox.io/s/stoic-mirzakhani-46exz?file= / SRC / App. js

Answer 1

Не совсем уверен, почему это происходит, но, вероятно, из-за того, как вы обрабатываете изменение ввода. Мне кажется, что компонент не распознает, что массив изменился. Как мне удалось исправить ваш код, заменив строку 9 в компоненте приложения следующим кодом:

let inputContent = [...inputValue];

При этом ссылка на массив будет изменена, а компоненты обновлены.

Answer 2

Вы изменяете объект состояния.

let inputContent = inputValue;

Поэтому состояние не перерисовывается. Измените его на

 let inputContent = [...inputValue];

Пример мутирующих объектов. React сравнивает предыдущее состояние и текущее состояние и выполняет рендеринг, только если они отличаются.

const source = { a: 1, b: 2 };
const target = source;
console.log(target);
console.log(target === source); =  true
target.b = 99;
console.log({target});
console.log({source}); //source == target due to mutation
console.log(source === target); = true

Помните, никогда не изменяйте.

Answer 3

Просто обновите ваш код следующим образом:

let inputContent = [ ...inputValue ];