reactjs - useRef 在动态上下文中，其中 ref 的数量不是恒定的，而是基于一个属性

Question

在我的应用程序中，我有一个“芯片”列表（每个 material-ui），并且在单击删除按钮时应该执行删除操作。该动作需要参考芯片而不是按钮。

一个天真的（和错误的）实现看起来像：

function MemberList(props) {
    const {userList} = this.props;
    refs = {}
    for (const usr.id of userList) {
        refs[usr.id] = React.useRef();
    }

    return <>
        <div >
            {
                userList.map(usr => {
                    return <UserThumbView
                        ref={refs[usr.id]}
                        key={usr.id}
                        user={usr}
                        handleDelete={(e) => {
                            onRemove(usr, refs[usr.id])
                        }}
                    />
                }) :
            }
        </div>
    </>
}

然而，正如所说，这是错误的，因为 react 期望所有钩子总是以相同的顺序，并且（因此）总是具有相同的数量。（上面实际上可以工作，直到我们在 for 循环下面添加一个状态/任何其他钩子）。

这将如何解决？或者这是功能组件的极限？

Answer 1

Refs 只是在渲染之间保存引用的一种方式。请记住在使用它之前检查它是否已定义。请参阅下面的示例代码。

function MemberList(props) {
  const refs = React.useRef({});

  return (
    <div>
      {props.userList.map(user => (
        <UserThumbView
          handleDelete={(e) => onRemove(user, refs[user.id])}
          ref={el => refs.current[user.id] = el}
          key={user.id}
          user={user}
        />
      })}
    </div>
  )
}