在模态框打开之前进行的 Axios 调用答案

【问题标题】：Axios call made before modal box opens在模态框打开之前进行的 Axios 调用
【发布时间】：2021-09-23 20:55:57
【问题描述】：

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

(How to open Bootstrap Modal from a button click in React)

下面的代码在用户单击按钮以打开模式以向用户呈现一些数据之前发出 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 调用？

【问题讨论】：

标签： reactjs axios

【解决方案1】：

好吧，你同时有多个问题，我只是做了这个代码沙箱作为例子：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>
  );
}

【讨论】：

【解决方案2】：

我会尝试为按钮设置一个 id，因为它是桌子上的一个按钮。

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

const fetchData = async (id) => {
   try {
         const content = await client.get(id);
       } catch (err) { 
         console.log(err);
       }
}

【讨论】：