Question

我有以下情况：

DisplayList组件，用于呈现列表。列表记录通过props（包含列表名称，描述，作者等）以及要列出的初始项和当前的“模式”（可以是“ r”，“ g”或“ a”）传递）。该组件显示列表信息，然后为每个列表项呈现一个DisplayItem组件。 DisplayItem组件还具有回调函数，因此，当用户单击列表中的某个项目时，该项目将变为带有当前模式的“标记”（即，该项目的“ mode”属性会更改）。

const DisplayList = (props) => {

  // Get list object (contains list name etc)
  // and current mode (r, a or g)
  const { list, currentMode } = props
  
  // Array of items to show
  // This is an array of objects, with each object representing a single item
  // eg {name: itemname, mode: r}
  const [ items,  setItems] = useState(props.items)

  // Callback function - triggered when the rendered DisplayItem is clicked
  // This changes the 'mode' of the item to the current mode
  function handleItemClick(index) {
      items[index].mode = currentMode
      setItems(items) // At this point the list of items should re-render
    }
  }

  return (
    <div className="displayItem">
      {
        items.map(item => <DisplayItem key={uuid()} item={item} handleCellClick={handleItemClick} />)
      }
    </div>
  )

}

我遇到的问题是，单击某个项目似乎会触发handleItemClick函数来更新itemList，但是当它到达setItems时，它不会重新呈现。

Answer 1

您没有将索引传递给回调。

尝试一下：

items.map({item, index} => <DisplayItem key={uuid()} item={item} handleCellClick={() => handleItemClick(index)} />)

由Brian Thompson在评论中指出

如何使用useState更新数组？

1 个答案: