一个非常简单的列表,其输入应该是可添加和可更新的。在我添加一个或多个输入然后尝试键入其中一个输入内部之后出现问题 - 所有输入在输入之后消失。
它与备注Item组件有关,我想了解那里到底发生了什么(valueChanged得到了缓存?)。我无法绕过头。
没有备忘录功能,代码按预期工作,但当然,所有输入都会在每次更改时得到更新。
这是一个正在发生的事情的gif:https://streamable.com/gsgvi
要复制粘贴下面的代码到HTML文件或看看这里:https://codesandbox.io/s/81y3wnl142
<style>
ul {
list-style-type:none;
padding:0;
}
input[type=text] {
margin:0 10px;
}
</style>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script type="text/babel">
const randomStr = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10);
const { useState, memo, Fragment } = React
const Item = memo(({ value, i, valueChanged }) => {
console.log('item rendering...');
return <li>
<input type='text' value={value} onChange={e => valueChanged(i, e.target.value)}/>
</li>
}, (o, n) => o.value === n.value)
const ItemList = ({ items, valueChanged }) => {
return <ul>{
items.map(({ key, title }, i) => (
<Item
key={key}
i={i}
value={title}
valueChanged={valueChanged}
/>
))
}</ul>
}
const App = () => {
const [items, setItems] = useState([
{ key: randomStr(), title: 'abc' },
{ key: randomStr(), title: 'def' },
])
const valueChanged = (i, newVal) => {
let updatedItems = [...items]
updatedItems[i].title = newVal
setItems(updatedItems)
}
const addNew = () => {
let newItems = [...items]
newItems.push({ key: randomStr(), title:'' })
setItems(newItems)
}
return <Fragment>
<ItemList items={items} valueChanged={valueChanged}/>
<button onClick={addNew}>Add new</button>
</Fragment>
}
ReactDOM.render(<App/>, document.querySelector('#app'))
</script>
valueChanged
是一个封闭,每个渲染得到一个新鲜的items
。但是你的memo
不会触发更新,因为它只检查(o, n) => o.value === n.value
。 Item
中的事件处理程序使用旧的items
值。
它可以用functional updates修复:
const valueChanged = (i, newVal) => {
setItems(oldItems => {
let updatedItems = [...oldItems];
updatedItems[i].title = newVal;
return updatedItems;
});
}
所以valueChanged
不依赖于items
而且不需要被memo
检查。
您的代码可能与其他处理程序有类似的问题。最好使用功能更新,因为新值基于旧值。
您可以尝试以这种方式初始化状态,我在codesandbox上尝试它,它可能是您正在寻找的行为。
https://codesandbox.io/s/q8l6m2lj64
const [items, setItems] = useState(() => [
{ key: randomStr(), title: 'abc' },
{ key: randomStr(), title: 'def' },
]);