Javascript 为什么 useSelector 返回初始状态，而在 redux 开发工具中它显示更新状态

如果我从父组件传递两个函数，则它不起作用 不出所料，但如果我在子组件中同时使用这两个函数，如 student.js，那么它就起作用了.你能建议一下为什么吗？

这一切都在Student(Student.js)中运行，因为Student是从store 直接订阅state.modal状态的.当存储更新时，用注入为props 的最新 Select 的modal状态值重新呈现Student，并将modal.modalInfo重新封闭在handleNoButton函数范围内.当点击"否"按钮时，它具有当前的modalInfo值.

在按钮点击处理程序aren't在StudentA(StudentA.js)中工作的情况下，这是因为您已经关闭了某个本地州中从未更新的state.modal.modalInfo的陈旧副本.

const Parent = ({ setModalDetails, modal: { modalInfo } }) => {
  const handleYesButton = () => {
    setModalDetails({
      ...modalInfo,
      isOpen: true,
      title: "Confirm Modal",
      content: "Do you want to change status?",
      modalName: "confirmModal"
    });
  };

  const handleNoButton = () => {
    console.log("from parent: ", modalInfo);
  };

  const [
    confirmOptions,
    setConfirmOptions // <-- never called to update confirmOptions
  ] = useState({
    buttons: [
      {
        label: "Yes",
        onClick: handleYesButton // <-- store state closed over!
      },
      {
        label: "No",
        onClick: handleNoButton  // <-- store state closed over!
      }
    ]
  });

  return <StudentA options={confirmOptions} />;
};

当Redux状态被更新并重新呈现Parent次时，setConfirmOptions不会被调用来更新confirmOptions值，因此StudentA将传递当前的confirmOptions状态，该状态现在包含过时的Redux状态值.

如果您想创建一个要传递的Options对象，那么只需直接计算并传递它即可.这样，无论何时渲染Parent，都会使用当前选定状态值创建新的confirmOptions对象.

示例:

const confirmOptions = {
  buttons: [
    {
      label: "Yes",
      onClick: handleYesButton
    },
    {
      label: "No",
      onClick: handleNoButton
    }
  ]
};

return <StudentA options={confirmOptions} />;

如果这样做会触发超过StudentA次的渲染，或者如果创建对象需要进行昂贵的计算，则应该使用useMemo挂钩来记忆并提供稳定的Options对象.但是，请注意，handleYesButton和handleNoButton在创建confirmOptions对象时是外部依赖项，因此也需要对它们进行记忆以便提供稳定的引用.

示例:

const handleYesButton = useCallback(() => {
  setModalDetails({
    ...modalInfo,
    isOpen: true,
    title: "Confirm Modal",
    content: "Do you want to change status?",
    modalName: "confirmModal"
  });
}, [setModalDetails, modalInfo]);

const handleNoButton = useCallback(() => {
  console.log("from parent: ", modalInfo);
}, [modalInfo]);

const confirmOptions = useMemo(
  () => ({
    buttons: [
      {
        label: "Yes",
        onClick: handleYesButton
      },
      {
        label: "No",
        onClick: handleNoButton
      }
    ]
  }),
  [handleNoButton, handleYesButton]
);

return <StudentA options={confirmOptions} />;

或者因为在Parent中没有引用handleYesButton和handleNoButton，所以可以将它们移到useMemo钩子回调中.

const confirmOptions = useMemo(
  () => ({
    buttons: [
      {
        label: "Yes",
        onClick: () => {
          setModalDetails({
            ...modalInfo,
            isOpen: true,
            title: "Confirm Modal",
            content: "Do you want to change status?",
            modalName: "confirmModal"
          });
        }
      },
      {
        label: "No",
        onClick: () => {
          console.log("from parent: ", modalInfo);
        }
      }
    ]
  }),
  [modalInfo, setModalDetails]
);

return <StudentA options={confirmOptions} />;