在 React JS 中更新状态时如何重新映射对象数组？

Question

我是一个试图搞乱 React 的新手，我遇到了一个问题，我已经被困了 2 天了，我有一个数组（准确地说是状态数组），我通过 SetArray 在其中添加值方法，一切都很好，但我也将该数组值分配给另一个数组并映射第二个数组。现在的问题是第一个数组随处更新，第二个我从第一个数组赋值的数组不会立即呈现，它仅在呈现整个部分时呈现。

点击时在数组 1 中设置值（也有复杂的 OnClick 功能，这里没有添加，顺便说一句，这个工作正常）

const [globalFLZ, setGlobalFLZ] = useState([]);
const addGlobalFLZ = (obj) => {
    const idd = 1;
    const newGlobalFLZ = { idd, ...obj };
    setGlobalFLZ([...globalFLZ, newGlobalFLZ]);
}

正在将数组 1 的值赋给数组 2

const weekColumns = {
    [uuid()]: {
        name: "All Items",
        items: globalFLZ              // assigning here
    },
    [uuid()]: {
        name: "Week 1",
        items: []
    },
    [uuid()]: {
        name: "Week 2",
        items: []
    },
    [uuid()]: {
        name: "Week 3",
        items: []
    },
    [uuid()]: {
        name: "Week 4",
        items: []
    },
    [uuid()]: {
        name: "Week 6",
            items: []
    }
};

映射数组 2 的代码

因为这是嵌套数组，首先列被映射然后 items 在里面

{Object.entries(columns).map(([columnId, column], index) => {
    return (
        <Box
            boxShadow={1}
            key={columnId}
            className="diDragableColumn"
        >
                <Box className="diDragableColumnTitle" boxShadow={1}><h3>{column.name}</h3></Box>

                <Droppable droppableId={columnId} key={columnId} direction="vertical">
                    {(provided, snapshot) => {
                        return (
                            <div
                                {...provided.droppableProps}
                                ref={provided.innerRef}
                                style={{
                                    background: snapshot.isDraggingOver
                                        ? "lightgrey"
                                        : "",
                                    minHeight: '100%',
                                }}
                                className="diDropable"
                            >
                                {column.items.map((item, index) => {   // the problem is here
                                    return (
                                        <Draggable
                                            key={item.id}
                                            draggableId={`dragID`+item.id}
                                            index={index}
                                        >
                                            {(provided, snapshot) => {
                                                return (
                                                    <Tooltip 
                                                        title={item.answerAusformuliert}
                                                        arrow 
                                                        placement="top" 
                                                        className="di-tooltip"
                                                        classes={{
                                                            tooltip: classes.tooltip,
                                                            arrow: classes.arrow
                                                        }} 
                                                    >
                                                        <div
                                                            ref={provided.innerRef}
                                                            {...provided.draggableProps}
                                                            {...provided.dragHandleProps}
                                                            style={{
                                                                margin: "0 7px 7px 0",
                                                              ...provided.draggableProps.style
                                                            }}
                                                            className="diDraggableItem"
                                                        >

                                                            {item.answerAusformuliert}
                                                            {item.id}
                                                            
                                                            
                                                        </div>
                                                        </Tooltip>
                                                );
                                            }}
                                        </Draggable>
                                    );
                                })}
                                {provided.placeholder}
                            </div>
                        );
                    }}
                </Droppable>
            </Box>
    );
})}

必需：column.items.map 应在阵列 1 更新时自动重新映射。

很抱歉这个又长又乱的问题，但我很困惑任何帮助将不胜感激。

提前致谢。

仅供参考：我正在使用 react-beautiful-dnd

编辑请在这里查看：https://codesandbox.io/s/silent-haze-wvrv7

Answer 1

问题出在您的 DragDrop 组件中。当通过道具发送新的 sendGlobalFLZ 时，您的 columns 状态不会更新。这是因为 useState 只有运行一次用于初始化值，然后仅在使用 set[StateVar] 时更新值。

您可以通过实施 useEffect 并提供 sendGlobalFLZ 作为依赖项来解决此问题。这将导致它重新运行并在每次收到 sendGlobalFLZ.

的新内存地址时更新您的列

const [allItemsUUID] = useState(() => uuid());
const [columns, setColumns] = useState(() => ({
  [allItemsUUID]: {
    name: "All Items",
    items: sendGlobalFLZ
    // items: staticData
  },
  [uuid()]: {
    name: "Week 1",
    items: []
  },
  [uuid()]: {
    name: "Week 2",
    items: []
  },
  [uuid()]: {
    name: "Week 3",
    items: []
  },
  [uuid()]: {
    name: "Week 4",
    items: []
  },
  [uuid()]: {
    name: "Week 5",
    items: []
  }
}));

useEffect(() => {
  const updatedColumns = {
    ...columns,
    [allItemsUUID]: {
      ...columns[allItemsUUID],
      items: sendGlobalFLZ
    }
  };

  setColumns(updatedColumns);
}, [sendGlobalFLZ]);

Full changes here

在 React JS 中更新状态时如何重新映射对象数组？

How to Remap Array of Objects when State gets updated in React JS?

reactjs

react-beautiful-dnd