因此,我有一个父组件,该组件映射一系列子代,这些子代都具有一些状态挂钩变量-在示例中,它是一个字符串,但可以是任何东西。
当我过滤父组件数组时,子组件神秘地超过了前一个数组的状态值:如果第一个子组件将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”-现在该应用程序将呈现
旧的[设置状态]
但是“旧的”子组件状态从未设置为正确吗?我一定缺少基本的东西,但是我不明白。
最佳答案
使用map
渲染JSX时,渲染的元素需要一个唯一键。关键是React如何跟踪哪些元素属于要映射的值;没有它们,如果元素改变其在数组中的位置,则会导致问题,即在重新渲染期间React不知道哪个JSX元素来自哪个数组元素。
假设数组中的每个单词都是唯一的,则可以执行以下操作:
{
words.map( word => <Sub word={word} key={word} />)
}
如果数组中的单词不是唯一的,则您需要采取某种方式为每个元素创建唯一键,即使它们在数组中四处移动也不会改变。
关于javascript - 从父级过滤时,React子级组件超过另一个子级的状态,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59377370/