Реагировать на useState, значение ввода не обновляется

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

РОДИТЕЛЬ

 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>
  );
}

РЕБЕНОК

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


reactjs react-hooks use-state
person Jacki    schedule 07.04.2020    source источник
comment
вы пробовали визуализировать свой чанк как компонент React? <Chunk inputValue={inputValue} handleChunkingChange={handleChunkingChange} />   -  person Edgar Henriquez    schedule 07.04.2020
comment
Код, который вы предоставляете, кажется нормальным, не могли бы вы предоставить онлайн-демонстрацию для объяснения?   -  person keikai    schedule 07.04.2020
comment
@EdgarHenriquez Я пробовал, но безрезультатно   -  person Jacki    schedule 07.04.2020
comment
@keikai Я добавил демо ссылку   -  person Jacki    schedule 07.04.2020

Ответы (3)


arrow_upward
3
arrow_downward

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

let inputContent = [...inputValue];

Таким образом изменяется ссылка на массив и обновляются компоненты.

person radovix    schedule 07.04.2020
comment
Это потому, что автор изменял состояние, и оба объекта ссылались на одно и то же. проверьте мой ответ. - person curious.netter; 07.04.2020

arrow_upward
1
arrow_downward

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

let inputContent = [ ...inputValue ];
person amin mohammadi    schedule 07.04.2020

arrow_upward
1
arrow_downward

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

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

Помните, никогда не мутируйте.

person curious.netter    schedule 07.04.2020