JavaScript 过滤器不更新 React 本地状态

Question

应用描述

我正在使用 Ant-transfer对于我的应用程序。我有两个组件，一个是父组件，另一个是子组件。在子组件中，我使用了 Ant-transfer ，当我玩本地状态时无需获取任何数据，我就可以将数据从一个表传输到另一个表。它按预期工作。

我的案例场景是

我有一个固定数据。其中包含对象数组。从该固定数据中，我将项目从组表转移到目标表通过使用 Ant-transfer .按下传输按钮 (">") 后，调用 handleChange 函数。在触发handleChange 函数后，它会更新targetKey 本地状态并进行post 请求。

问题

选择项目或项目并提出邮政请求时，我从父组件中检索所选项目。我从选中的item中筛选出固定的数据，将items数组的字符串id传给本地state。但是，当我刷新页面时，固定数据又恢复到原来的状态。所有项目都在组表中，它没有显示应该在表右侧的选择项目。 看来我的过滤函数不起作用。

目标:

我的目标是让选中的项目位于右侧，未选中的项目位于左侧；如果我刷新页面，它应该不会改变。

复现 Ant 转移

我转载了Ant-transfer-demo .

这是我的全部代码

const ZoneGroups: React.FC<Props> = ({
  onAddToZone,
  selectedDisplayGroups,
}) => {
  const displayGroups = [
    {
      id: "FF",
      level: 2,
      name: "rice",
    },
    {
      id: "AA",
      level: 2,
      name: "juice",
    },
    {
      id: "GAA",
      level: 2,
      name: "ball",
    },
    {
      id: "FF3AA",
      level: 2,
      name: "TV",
    },
    {
      id: "FH",
      level: 2,
      name: "Pencil",
    },
    {
      id: "FHAA",
      level: 2,
      name: "Tea",
    },
  ];

  // After post request I am getting updated selected group "selectedDisplayGroups"
  // "selectedDisplayGroups" data array of object like this: 👇🏾
  // [{
   //   id: "FHAA",
    //  level: 2,
    //  name: "Tea",
  //    }],

  
  const DisplayItems = displayGroups.map((displayGroup, index) => {
    return {
      key: displayGroup.id,
      title: `${displayGroup.level} ${displayGroup.name}`,
    };
  });
  
  
  const SelectedItems = selectedDisplayGroups.map(
    (displayGroup) => displayGroup.id
  );
  // This is the items id which is selected.👆🏽👆🏽👆🏽👆🏽
  // SelectedItems return array of string ID ['FH', 'FHAA', 'GA'] like this

  const filteredGroups = DisplayItems.filter((g) =>
    SelectedItems.includes(g.key)
  ).map((id) => id.key);

  console.log(SelectedItems);

  const [selectedIds, setSelectedIds] = useState([]);
  const [targetKey, setTargetKey] = useState(filteredGroups);
  const [submit, setSubmit] = useState(false);

  const handleChange = (target: string): void => {
    setTargetKey(target);
    onAddToZone(target); // this is my post request function
    setSubmit(true);
  };

  const handleSelectChange = (sourceSelectedKeys: string, id: string): void => {
    setSelectedIds([...sourceSelectedKeys]);
  };

  return (
    <>
      <Transfer
        dataSource={DisplayItems}
        titles={["Group", "Target"]}
        render={(item): string => item.title}
        targetKeys={targetKey}
        selectedKeys={selectedIds}
        onChange={handleChange}
        onSelectChange={handleSelectChange}
        showSearch
        oneWay
        checked={submit}
        style={{ marginBottom: 50 }}
      />
    </>
  );
};

export default ZoneGroups;

Answer 1

如果您需要将任何状态保存到 localStorage 以允许重新加载应用程序，那么看起来您应该保存 targetKeys 状态。

例子:

const App = () => {
  // Lazy state initializer function to load from localStorage
  // or fallback/default initial value
  const [targetKeys, settargetKeys] = useState(() => {
    return JSON.parse(localStorage.getItem("targetKeys")) || filteredGroups;
  });
  const [selectedKeys, setselectedKeys] = useState([]);

  // persist state updates to localStorage
  useEffect(() => {
    localStorage.setItem("targetKeys", JSON.stringify(targetKeys));
  }, [targetKeys]);

  const handleChange = (nextTargetKeys) => {
    settargetKeys(nextTargetKeys);
  };

  const handleSelectChange = (sourceSelectedKeys) => {
    setselectedKeys([...sourceSelectedKeys]);
  };

  return (
    <>
      <Transfer
        dataSource={DisplayItems}
        titles={["Source", "Target"]}
        targetKeys={targetKeys}
        selectedKeys={selectedKeys}
        onChange={handleChange}
        onSelectChange={handleSelectChange}
        render={(item) => item.title}
        oneWay
        style={{ marginBottom: 16 }}
      />
    </>
  );
};

当组件挂载时，您很可能希望从您的数据库中重新获取任何数据以确保您拥有最新的后端数据，但是如果您在应用程序启动/挂载时需要任何这些数据，则保留任何其他数据/状态您的应用/组件需求。