useRef в динамическом контексте c, где количество ссылок не является постоянным, а основано на свойстве

Question

В моем приложении у меня есть список "фишек" (для материала-интерфейса), и при нажатии кнопки удаления должно быть выполнено действие удаления. В действии должна быть указана ссылка на чип , а не кнопку.

Наивная (и неправильная) реализация будет выглядеть так:

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>
    </>
}

Однако, как сказано это неправильно, так как реакция ожидает, что все хуки будут всегда в одном и том же порядке и (следовательно) всегда будут иметь одинаковое количество. (выше будет работать, пока мы не добавим состояние / любой другой хук ниже для l oop).

Как бы это решить? Или это предел функциональных компонентов?

Answer 1

Возможно, попробуйте что-то вроде этого:

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

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

Рефсы - это просто способ сохранить ссылку между рендерами. Просто помните, что прежде чем использовать ссылку, убедитесь, что она определена.