时间戳

首页 > 解决方案 > 从父级过滤时，反应子组件从另一个子组件中超越状态

javascript - 从父级过滤时，反应子组件从另一个子组件中超越状态

问题描述

所以我有一个父组件，它映射一个子数组，这些子组件都有一些状态挂钩变量 - 在示例中它是一个字符串，但它可以是任何东西。

当我过滤父组件数组时，孩子们神秘地超越了前一个数组的状态值：如果第一个孩子将状态设置为字符串“true” - 新数组中的第一个孩子也呈现为“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>
    )
}

这会呈现一个列表，如下所示：

false [设置状态]

cat false [设置状态]

...ETC

现在我点击第一个按钮，所以它去

真正的[设定状态]

cat false [设置状态]

...ETC

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

old true [设置状态]

但是“旧”子组件状态从未设置为true对吗？我一定错过了一些基本的东西，但我就是不明白..非常感谢帮助

标签： javascriptreactjsreact-hooks

解决方案

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

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

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

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

推荐阅读