时间戳

首页 > 解决方案 > 从 IonModal 更新主页组件的状态

reactjs - 从 IonModal 更新主页组件的状态

问题描述

TLDR：我正在从应该显示在主页上的 Ionic 模态向 Redux 存储添加数据，但是当模态关闭时，主页不会更新以显示新数据。

我有一个 IonModal 用于从 API 获取数据。然后，我将响应数据添加到我的 Redux 存储中的列表中，该列表显示在主页上。

这是主页反应代码：

export default function Home(): ReactElement {
  const quotes = useSelector((state: any) => state.quotes);
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(quotes);
  }, [quotes]);

  return (
    <IonPage>
      <IonContent fullscreen>
        <Modal />
        {data.map((q: any) => {
          return <p key={q?._id}>{q?.content}</p>;
        })}
      </IonContent>
    </IonPage>
  );
}

这是模态的 React 代码：

export default function Modal(): ReactElement {
  const [showModal, setShowModal] = useState(false);
  const dispatch = useDispatch();

  const getData = async () => {
    const quote = await axios.get("https://api.quotable.io/random");
    dispatch(addQuote(quote.data));
    setShowModal(false);
  };

  return (
    <>
      <IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
        <IonButton onClick={() => getData()}>Get Data</IonButton>
      </IonModal>
    </>
  );
}

当该getData()函数在模式中运行时，我希望模式关闭并且数据显示在主页上，但目前，即使数据在 redux store 中，主页也不会更新。我认为这与更新 redux 状态时未安装的组件有关。如果是这种情况，我将如何在安装组件时对其进行更新？

我很困惑，所以任何帮助或建议将不胜感激，干杯。

标签： reactjsionic-frameworkredux

解决方案

我在 ionic 论坛中回答... 将状态更改从模态移出并移入父组件。

向模态添加回调以处理按钮单击...</p>

推荐阅读