使用 react-beautiful-dnd 时更改项目列表不会重新呈现组件

Question

我正在使用 react-beautiful-dnd 让用户通过拖放来选择选项。

但是，当更改选项的顺序时，组件似乎不会重新呈现。（我试过控制台记录它，它似乎已经改变了。）

这是onDragEnd方法：

const onDragEnd = (result) => {
    if (!result.destination) return;

    const { source, destination } = result;

    if (!destination) {
      return;
    }

    if (source.index === destination.index) {
      return;
    }

    let items = [...list];
    const [removed] = items.splice(source.index, 1);
    items.splice(destination.index, 0, removed);

    setList([...items]);
  };

所有代码都可以在这个codesandbox.

中找到

Answer 1

您正在 DND 中呈现 optionalCourses 但您正在更新列表状态。您应该改为渲染 list。

return (
    <div className={componentClassName}>
      <span className={`${componentClassName}__title`}>{groupTitle}</span>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId={groupId}>
          {(provided, snapshot) => (
            <div
              {...provided.droppableProps}
              ref={provided.innerRef}
              className={`${componentClassName}__list`}
            >
              

>  {list.map((optionalCourse, index) => {
>                      return <OptionalCourseCard key={index} {...optionalCourse} />;

              })}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );

使用 react-beautiful-dnd 时更改项目列表不会重新呈现组件

Changing the list of items doesn't rerender the component when using react-beautiful-dnd

javascript

reactjs

react-beautiful-dnd