reactjs - 使用 AJAX 请求响应钩子

Question

我正在使用 React，我想知道我是否正确地做事。

我想在 React 中为输入框的多个数据列表发出多个 ajax 请求。我做这样的事情：

• 这是我的获取功能

  function GetData(url, processFunc) {
       ... 
       jquery ajax request using url
       ...
       if (status === 'success') {
           if (processFunc) {
               processFunc(data);
           }
       }
  }
  

• 仅显示最快结果的解决方案。

   function ComponentA() {
       const [ajaxDataA, setAjaxDataA] = useState(null);
       const [ajaxDataB, setAjaxDataB] = useState(null);
       const [ajaxDataC, setAjaxDataC] = useState(null);
       const [dataA, setDataA] = useState(null);
       ...dataB..
       ...dataC..
  
       const exampleFunctionA = function(data) {
           ..processes data into result
           setDataA(result);
       }
  
       const exampleFunctionB = ....
       const exampleFunctionC = ...
  
       useEffect( () => {
           GetData(url_1, exampleFunctionA);
           GetData(url_2, exampleFunctionB);
           GetData(url_3, exampleFunctionC);       
       }, []);
  
       return (<>
           ...
           {dataA}
           {dataB}
           ...
       <>);
   }
  

• B 解决方案就是我问这个问题的原因。这很好用，但我不确定它是否正确，或者这就是钩子的用途。

function ComponentA() {
    const [ajaxDataA, setAjaxDataA] = useState(null);
    const [ajaxDataB, setAjaxDataB] = useState(null);
    const [ajaxDataC, setAjaxDataC] = useState(null);
    const [dataA, setDataA] = useState(null);
    ...dataB..
    ...dataC..

    useEffect( () => {
        GetData(url_1, setAjaxDataA);
        GetData(url_2, setAjaxDataB);
        GetData(url_3, setAjaxDataC);       
    }, []);
    
    useEffect( () => {
        ..processes data into result
        setDataA(result);
    }, [ajaxDataA]);
    
    ..useEffect ... ,[ajaxDataB] ...
    ... [ajaxDataC] ... 
    
    return (<>
        ...
        {dataA}
        {dataB}
        ...
    <>);
}

我找到了这个解决方案，所以我不重复逻辑。我不使用这个解决方案，因为我必须基本上处理数据而不是

 const a = GetData(..., processFunc);

我会使用这个解决方案。所以我仍然需要在刷新时观看的 useEffects

 const a = useFetch(...)

Ajax 请求不会显示在反应渲染功能中

所以基本上问题是：

解决方案 B 是一个好的解决方案吗？

标签： reactjsajaxrequestreact-hooksuse-effect

Answer 1

好吧好吧..如果其他人走上了这条可怕的道路，我会提出这个问题。所以基本上我在等待 AJAX 请求使用 useEffect 钩子完成加载

起初它看起来很合乎逻辑：

1. 我发送请求。
2. 完成后，它会调用 useState hooks 的 setter 函数
3. 状态变量更新
4. useEffect 钩子触发器
5. 我对 useEffect 正文中的到达数据做一些事情

这是一个大笨蛋
，因为它像被迫一样刷新了状态，用枪指着它的头

它导致了不一致：子组件希望在 AJAX 数据到达之前使用它。它就像一个随机数生成器。页面加载的一半时间和另一半死于空引用异常。

解决方案：承诺