Question

我有以下问题，我似乎无法解决。

Container.jsx


  const [selectedCardTypeList, setSelectedCardTypeList] = useState([]);

  const onDragEnd = result => {

    const {destination, source, draggableId} = result;
    if (!destination) {
      return;
    }

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

    let newInputIds = inputs;
    newInputIds.splice(source.index, 1);
    newInputIds.splice(destination.index, 0, draggableId);
    setSelectedCardTypeList(newInputIds);
  };

  return (
      <div>
        <DragDropContext onDragEnd={onDragEnd}>
          <DroppableWrapper selectedCardTypeList={selectedCardTypeList}>
            {selectedCardTypeList.map((v, index) =>
                  <CardContainer removeCardType={removeCardType} cardType={v} index={index}/>
            )}
          </DroppableWrapper>
        </DragDropContext>
      </div>
  )

DropableWrapper.jsx

import {Droppable} from "react-beautiful-dnd";
import React from "react";

export const DroppableWrapper = ({children, selectedCardTypeList}) => {
  return (
      <>
      <Droppable droppableId="droppable" direction="horizontal">
        {(provided, snapshot) => (
            <div
                className={selectedCardTypeList.length ? 'container-horizontal' : 'container-vertical'}
                ref={provided.innerRef}
                {...provided.droppableProps}
            >
              {children}
              {provided.placeholder}
            </div>
            )}
      </Droppable>
        </>
)};

export default DroppableWrapper;

如您所见，我省略了很多代码，这是一个虚拟的示例，但是基本上发生的是，如果我声明性地将子级传递给父级（使用.map），则Child元素只会尊重第一次状态更改，尽管我可以确认正在更新状态，但是在渲染{children}时并没有反映出这种状态。

有什么想法吗？谢谢！

CardContainer没什么问题，如果我不将Droppable提取为包装器，则将其保留在它可以工作的容器中。

Answer 1

您需要改为使用功能设置状态。在onDragEnd的末尾：

    setSelectedCardTypeList(prevState => {
        var newState = [...prevState.slice(0, source.index), ...prevState.slice(source.index + 1)];
        return [...newState(0, destination.index), draggableId, ...newState(destination.index)];
    });

反应props.children不会在第一个状态更改后重新呈现

1 个答案: