Question

每次onClick时，我都会渲染一个新的react组件。在每个组件中，我要提交不同的文本值。我遇到的问题是，当我输入新文本并单击按钮时，将设置newState，但是它将更新所有渲染的组件。所以我想知道是否有办法让我使用以前的状态做出反应。同样，我考虑处理此问题的方式是通过将每个新状态推入数组中，但是没有用。发生的事情是只用新值更新了数组。那么我该如何解决这个问题。实例将不胜感激。

Answer 1

您遇到的问题是将所有组件链接到相同的状态键。

您真正需要做的是使用多个键保存每个组件的值的状态。

这是使用useState的示例。

const ParentComponent = () => {
  const [state, setState] = useState({ val1: '', val2: '' })

  return (
    <>
      <Component1 value={val1} onChange={(value) => setState({ ...state, val1: value })} />
      <Component2 value={val2} onChange={(value) => setState({ ...state, val2: value })} />
    </>

  }
}

通过声音，您可能会有一个数组，该数组得到更新，因此您可以使这个概念适用于您。

很难给您一个很好的例子，而又看不到您的实现。如果您提供更多信息，我可以随时为您提供帮助。

Answer 2

您是对的，您需要使用数组作为状态并更新它，但是可能您做的不正确。试试这个：

const ParentComponent = () => {
const [itemsArray, setItemsArray] = useState([])

// Pass this method and use it in the child component
changeItem = (index, key, val) => {
    const newArray = [ ...itemsArray ];
    newArray[index][key] = val;
    setItemsArray(newArray);
}

return (
    <>
        {
            itemsArray && 0 < itemsArray.length &&
                itemsArray.map((item, key) => <Component changeItem={changeItem}/>)
        }
    </>

} }

如何保存以前的状态以做出反应？

2 个答案: