useState不会重新渲染

Question

我遇到一个问题，即useState更新状态但不显示更改，直到我刷新应用程序。首先，我声明了一个名为sampleFriends的数组，由具有字段"name"、"location"和"picture"（数组的每个元素看起来类似于：{name:'John'，location:'Boston'，picture:TestImage}）的对象组成。

然后，我有以下useState：

const [selectedFriends, setSelectedFriends] = useState([])

我成功地渲染了一些内容。

sampleFriends.map(({ name, location, image }, index) => (
<NewMsgTableRow
  name={name}
  index={index}
  location={location}
  image={image}
  onPress={() => selectFriend(name)}
/>

我也有这个函数位于上方

  const selectFriend = name => {
    // if the friend is not already selected
    if (!selectedFriends.find(e => e === name)) {
      const newFriends = selectedFriends
      newFriends.push(name)
      setSelectedFriends(newFriends)
    }
  }

组件NewMsgTableRow有一个按钮，该按钮使用onPress。

  <TouchableOpacity
    onPress={onPress}
  >

当选中朋友时，我希望能立即渲染selectedFriends（即当TouchableOpacity被触摸且状态更新时）。然而，当我点击按钮时，直到我编辑并保存我的代码并自动刷新后才会显示出来。 我的理解是useState在更新后会立即重新渲染组件，但在这种情况下却没有发生，我不知道原因。我一直在阅读它是异步的，并且它不会立即更改，但我不知道如何使其工作。希望我的描述清晰明了，感谢你的帮助！

- jchm

---

push操作会改变原始数组，因此不会重新渲染，您需要创建一个包含这些值的新数组并更新状态。 - Code Maniac

谢谢！newFriends不是新数组吗？ - jchm

不是的。它持有对原始数组的引用。请使用 const newFriends = [...selectedFriends]。 - nithinpp

Answer 1

您可以使用数组展开或Array.concat()来进行浅克隆，并添加新项，因此请更改下面的行：

const newFriends = selectedFriends

到这一行：

const newFriends = [...selectedFriends]

- Hossein Gerami