Question

一个非常简单的列表，其中包含应该是可添加和可更新的输入。在添加一个或多个输入，然后尝试在其中一个输入中键入内容后，就会出现此问题-输入一个后的所有输入都消失了。

它与存储Item组件有关，我想了解那里到底发生了什么（valueChanged是否被缓存？）。我不能缠头。

没有备忘功能，代码可以按预期工作，但当然，所有输入都会随着每次更改而更新。

以下是发生的事情的图像：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/babel-standalone@6.15.0/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>

Answer 1

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进行检查。

您的代码可能与其他处理程序有类似的问题。当新的价值基于旧的价值时，最好使用功能更新。

Answer 2

您可以尝试以这种方式初始化状态，我在codesandbox上尝试过，这可能是您正在寻找的行为。

https://codesandbox.io/s/q8l6m2lj64

    const [items, setItems] = useState(() => [
    { key: randomStr(), title: 'abc' },
    { key: randomStr(), title: 'def' },
]);

列出更新错误

2 个答案: