状态不更新以响应嵌套对象（挂钩）

Question

我一直在玩 react-beautiful-dnd 和 hooks（对 React 很陌生）- 由于某些原因，我的状态不会在拖动时更新。（编辑：我知道该逻辑仅适用于 'same category' 拖动 - 这对我来说也不会更新 UI）

数据（简体）

const skills = {
  skills: {
    skill1: {
      id: "skill1",
      name: "Communication"
    },
    skill2: {
      id: "skill2",
      name: "Empathy"
    },
    skill3: {
      id: "skill3",
      name: "Initiative"
    }
  },
  categories: {
    cat1: {
      id: "cat1",
      name: "Core",
      skillIds: ["skill1", "skill2", "skill3", "skill4"]
    },
    cat2: {
      id: "cat2",
      name: "Craft",
      skillIds: ["skill5", "skill6", "skill7", "skill8"]
    },
    cat3: {
      id: "cat3",
      name: "Leadership",
      skillIds: ["skill9", "skill10"]
    }
  },
  categoryOrder: ["cat1", "cat2", "cat3"]
};

用于更新正确类别中的 skillIds 数组的函数

const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  const onDragEnd = (result) => {
    const { source, destination } = result;

    // dropped outside the list
    if (!destination) {
      return;
    }

    // Handle moving within one category
    if (source.droppableId === destination.droppableId) {
      const catSkills = data.categories[source.droppableId].skillIds;
      const items = reorder(catSkills, source.index, destination.index);
      const newData = {
        ...data,
        categories: {
          ...data.categories,
          [source.droppableId]: {
            ...data.categories[source.droppableId],
            skillIds: items
          }
        }
      };
      setData(newData);
    }
  };

我创建了一个简化的 codesandbox 来测试 - https://codesandbox.io/s/hooks-problem-il5m4

感谢任何帮助！

Answer 1

我可以看到状态正在更新

 if (source.droppableId === destination.droppableId) { setData(data) }

这个“if”子句意味着它只会在拖动发生在同一车道上时更新状态。我认为您已经尝试将其拖动到另一条车道上。希望这就是你的意思

编辑：我已经理解你的问题了。问题是你没有使用更新的数据你正在循环静态skill.I希望这能解决你的问题

      {data.categoryOrder.map((catId) => {
      const category = data.categories[catId]; //change skills to data
      const catSkills = category.skillIds.map(
        (skillId) => skills.skills[skillId]
      );

状态不更新以响应嵌套对象（挂钩）

State not updating in react with a nested object (hooks)

setstate

reactjs

react-beautiful-dnd