时间戳

首页 > 解决方案 > 在模态框打开之前进行的 Axios 调用

reactjs - 在模态框打开之前进行的 Axios 调用

问题描述

我正在使用引导程序打开一个modal。以前我试图使用布尔值来显示/关闭模式但无法让它工作。这是我试图寻求帮助的 StackOverflow 帖子：

（如何通过在 React 中单击按钮打开 Bootstrap 模式）

下面的代码在用户单击按钮以打开模式以向用户呈现一些数据之前发出 AJAX 请求。

此按钮位于主页中：

<td><button type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" onClick={() => rowEvents(id)}>Compare</button></td>

我在主页中包含这个组件，它实际上是在发出 axios 请求：

<ComparisonModal previousWon={previousWon} currentWon={currentWon} />


useEffect(() => {
    async function fetchData() {
        const content = await client.get('1');
    }
    fetchData();
}, []);

我对 React 很陌生，有没有更好的方法来做到这一点，以便在用户单击按钮以显示模式之前不会进行 Axios 调用？

标签： reactjsaxios

解决方案

好吧，你同时有多个问题，我只是做了这个代码沙箱作为例子：https ://codesandbox.io/s/relaxed-benji-8k0fr

回答您的问题：

  • 是的，您可以使用布尔值显示模态。基本上会像{booleanCondition && <MyModal />}（它包含在代码沙箱中
  • 是的，您可以在单击按钮之前执行 axios 请求。在示例中，我们定义了一个函数：handleClick然后handleClick我们做了两件事，getData这是一个持续 3 秒的模拟请求，并且setShowModal能够看到模式。

结果将是：

export default function App() {
  const [showModal, setShowModal] = React.useState(false);
  const [data, setData] = React.useState({});

  const getData = async (id) => {
    await wait(3000);
    setData({ loaded: id });
  };

  const handleClick = (id) => {
    setData({});
    setShowModal(true);
    getData(1);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => handleClick(1)}>Show Modal with Id 1</button>
      <button onClick={() => handleClick(2)}>Show Modal with Id 2</button>
      {showModal && <Modal data={data} onClose={() => setShowModal(false)} />}
    </div>
  );
}

推荐阅读