Node.js 如何仅在（React）表单提交的数据成功接收和送达后获取（表示）数据？

我目前正在构建一个基于搜索的传奇联盟（MOBA或多人在线竞技场游戏）web应用程序，基本上允许用户搜索其召唤者的姓名，并获取有关搜索输入的一般信息。（数据由游戏自己的第三方api提供）

我已经能够成功地检索表单数据并执行预期的后端处理，但是，在客户端的初始呈现时，我的结果列表组件已经在尝试获取不存在的已处理数据

在服务器实际成功提供数据之前，如何防止服务器请求触发

（简化的单组件客户端示例）

• 召唤器数据端点设置为

  http://localhost:3001/api/summoner

• 服务器不包含任何其他路由

• 我尝试将axios请求放在一个异步函数中，并等待请求响应，它似乎正在工作，但是，当客户端启动时，服务器仍然接收到未定义的请求，而客户端启动后，服务器试图获取请求，而决不允许兑现承诺

• 所以我接受了@imjared和@HS的建议，我真的很接近

我还有一个问题。。。我的数据映射组件试图在实际接收不存在的数据之前映射它，这给了我一个错误，它无法映射未定义的匹配项

  const [modalStatus, setModalStatus] = useState(false);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState({ hits: [] });
  const [summName, setSummName] = useState('');
  const [summQuery, setSummQuery] = useState('');
  const summonerFormData = new FormData();
  const prepareResults = async () => {
    await setSummQuery(summName);
  };

  const findSummoner = async () => {
    setLoading(true);
    setModalStatus(false);
    await summonerFormData.set('summonerName', summQuery);
  };

  useEffect(() => {
    const fetchData = async () => {
      if (summQuery) {
        setData({ hits: [] });
        console.log('fetching');
        await axios
          .get('http://localhost:3001/api/summoner')
          .then(res => {
            setData(res.data);
            setLoading(false);
            setModalStatus(true);
            return data;
          })
          .catch(error => {
            console.log(error);
          });
      }
    };

    fetchData();
  }, [summQuery]);

• 成功！谢谢你们！以下是最终对我有用的东西：

---

此流程将帮助您更好地设计-

1. User - input 
2. Hit - search
3. Set loading in state - true,
5. Set data in state - empty
6. Call api
7. Get data
8. Then, set data in state
6. Set loading in state - false

沿渲染/返回中的侧边-

1. if loading in the state - indicate loading.
2. if loading done( false ) and data is not empty - show data.
3. if loading done and data is empty - indicate 'not-found'.

---

进入初始呈现部分-

axios.get（）

调用api，只有在案例中提交表单后才应启动api。因此，应该在事件处理程序中移动该逻辑。

此流程将帮助您更好地设计-

1. User - input 
2. Hit - search
3. Set loading in state - true,
5. Set data in state - empty
6. Call api
7. Get data
8. Then, set data in state
6. Set loading in state - false

沿渲染/返回中的侧边-

1. if loading in the state - indicate loading.
2. if loading done( false ) and data is not empty - show data.
3. if loading done and data is empty - indicate 'not-found'.

---

进入初始呈现部分-

axios.get（）

调用api，只有在案例中提交表单后才应启动api。因此，应该将该逻辑移到事件处理程序中。

'我不确定您的问题是否正确。但是，如果您试图仅在“axios.get（）”返回后移动以填充数据，则可以在异步等待中设置它。@Claeusdev嘿，谢谢您的提示！因此，我尝试将组件设置为等待axios请求的异步组件，但遇到了另一个问题。请检查使用挂钩获取数据我不确定你的问题是否正确。但是，如果您试图仅在“axios.get（）”返回后移动以填充数据，则可以在异步等待中设置它。@Claeusdev嘿，谢谢您的提示！因此，我尝试将该组件设置为等待axios请求的异步组件，但遇到了另一个问题。请检查使用挂钩获取数据。非常感谢。你的建议确实帮助我取得了一些突破！但是现在我遇到了我最近更新中描述的另一个问题..谢谢！你的建议确实帮助我取得了一些突破！但现在我遇到了我最近更新中描述的另一个问题。。

1. User - input 
2. Hit - search
3. Set loading in state - true,
5. Set data in state - empty
6. Call api
7. Get data
8. Then, set data in state
6. Set loading in state - false

1. if loading in the state - indicate loading.
2. if loading done( false ) and data is not empty - show data.
3. if loading done and data is empty - indicate 'not-found'.