1

我希望基于 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

4

3 回答 3

3

不完全确定为什么会发生这种情况，但可能是因为您处理输入更改的方式。在我看来，该组件无法识别该数组已更改。我如何设法修复您的代码是用以下代码替换 App 组件中的第 9 行：

let inputContent = [...inputValue];

通过这样做，数组的引用被改变并且组件被更新。

于 2020-04-07T13:03:39.890 回答
1

您正在改变状态对象。

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

记住，永远不要变异。

于 2020-04-07T13:14:08.313 回答
1

只需按如下方式更新您的代码：

let inputContent = [ ...inputValue ];
于 2020-04-07T13:06:20.980 回答