Question

因此，我有一个父组件，该组件映射一系列子代，并且这些子代都有一些状态钩子变量-在示例中，它是一个字符串，但可以是任何东西。

当我过滤父组件数组时，子组件神秘地超过了前一个数组的状态值：如果第一个子组件将state设置为字符串“ true”，则NEW数组中的第一个子组件也呈现为“ true” 。

我知道/认为它与js引用有关，但我不知道如何解决！

父母：

function App() {
  const array = ['the', 'cat', 'and', 'the', 'old', 'hat']
  const [words, setWords] = useState(array)

  const filterWords = (e) => {
    setWords(array.filter( a => a.includes(e.target.value)))
  }

  return (
    <div className="App">
      <input type='text' onChange={filterWords} />
    {
      words.map( word => <Sub word={word} />)
    }

    </div>
  );
}

孩子：

    const [state,
        setState] = useState('false')

    useEffect( () => console.log('rerendered', state) )
    return (
        <div>
            <>{props.word}</>
            <>{state}</>
            <button onClick={() => setState('true')}>set state</button>
        </div>
    )
}

这将呈现如下列表：

错误的[设置状态]

猫假[设置状态]

...等

现在我点击第一个按钮

真实的[设置状态]

猫假[设置状态]

...等

然后我在搜索框中输入字母'o'-现在应用程序呈现

旧 true [设置状态]

但是“旧” 子组件状态从未设置为 true 对吗？我必须缺少一些基本知识，但我不明白。.非常感谢

Answer 1

当您使用map渲染JSX时，渲染的元素需要一个唯一键。关键是React如何跟踪哪些元素属于要映射的值；没有它们，如果元素改变其在数组中的位置，则可能导致问题，即在重新渲染期间React不知道哪个JSX元素来自哪个数组元素。

假设数组中的每个单词都是唯一的，则可以执行以下操作：

{
  words.map( word => <Sub word={word} key={word} />)
}

如果数组中的单词不是唯一的，则您需要采取某种方式为每个元素创建唯一键，即使它们在数组中四处移动也不会改变。

Answer 2

我认为这是因为您没有钥匙。试试这个：

{
  words.map( word => <Sub key={word} word={word} />)
}

从父级过滤时，React子级组件超过另一个子级的状态

2 个答案: