时间戳

首页 > 解决方案 > 使用 useEffect 存储响应以避免使用反应钩子重新渲染

reactjs - 使用 useEffect 存储响应以避免使用反应钩子重新渲染

问题描述

我正在使用 React 钩子并试图弄清楚，我应该如何将 api 调用的响应存储 response.data._embedded.assets在状态变量中。

由于重新渲染，使用setAssets(response.data._embedded.assets);不起作用。所以我决定使用useEffect如下代码所示，但这违反了 react hooks 的规则——Hooks 只能在函数组件的主体内部调用。我知道useEffect应该根据反应钩子在外部定义，但是我将如何将响应存储在状态变量中？请指教。

const [selectedTabIndex, setselectedTabIndex] = useState(0);
    const [assets,setAssets] = useState([]);

  
    
    let companyCategory;
    axios
    .get(url, {
        params: {
            assetCategoryId: selectedTabIndex
        }
    }).then(response => {
    if (sessionStorage.getItem('companyCategory') !== null) {
        companyCategory = JSON.parse(sessionStorage.getItem('companyCategory') )
      
    }
    console.log("Inside response of web api call");
    console.log(response.data._embedded.assets);
    useEffect(() => {
        // Should not ever set state during rendering, so do this in useEffect instead.
        setAssets(response.data._embedded.assets);
      }, []);
    //setAssets(response.data._embedded.assets);
   
}).catch(err => console.log(err));

在一个类组件中，上面的状态变量声明在响应中是这样的：

this.setState({
        companyCategory: companyCategory,
         assets: response.data._embedded.assets
     })

标签： reactjsreact-hooks

解决方案

我会将整个 get 请求放在 useEffect 中。

    const [selectedTabIndex, setselectedTabIndex] = useState(0);
    const [assets,setAssets] = useState([]);

    useEffect(() => {
        // Should not ever set state during rendering, so do this in useEffect instead.
        
    
    let companyCategory;
    axios
    .get(url, {
        params: {
            assetCategoryId: selectedTabIndex
        }
    }).then(response => {
    if (sessionStorage.getItem('companyCategory') !== null) {
        companyCategory = JSON.parse(sessionStorage.getItem('companyCategory') )
      
    }
    console.log("Inside response of web api call");
    console.log(response.data._embedded.assets);
    
    setAssets(response.data._embedded.assets);
   
}).catch(err => console.log(err));
 
}, []);

推荐阅读