API 响应与 redux 一起使用效果答案

【问题标题】：API response in useeffect with reduxAPI 响应与 redux 一起使用效果
【发布时间】：2021-12-28 11:56:51
【问题描述】：

我想在我的 react 项目中使用 axios 从我的服务器调用产品。我用的是redux，当我用useeffect触发了组件里面的动作时，我的产品还没来，我的产品来了，没有使用useeffect。

在我的组件中：

async function get(){
    await props.getProducts()
    console.log(props.products)
} 

    useEffect(() => {
        get()
    }, []);  when I  write 'get or get()' in square brackets , products loop coming to console continuous
}

我的行动：

import axios from "axios"
const url="https://my-expressjs-ap.herokuapp.com/products"

export const getProducts=()=> (dispatch: (arg0: { type: any; payload: any }) => any)=>{
    axios
    .get(
      `https://my-expressjs-ap.herokuapp.com/products`
    )
    .then((response) =>
      dispatch({ type: "GET_PRODUCTS_SUCCESS", payload: response.data })
    )
    .catch((error) => dispatch({ type: "GET_PRODUCTS_ERROR", payload: error }));
//     fetch(url).then(res=> res.json())
//    .then(response=>dispatch(({type:"GET_PRODUCTS_SUCCESS",payload:response}))
//    ).catch(error=>dispatch({type:"GET_PRODUCTS_ERROR", payload:error}))
}

我的减速机：

const INITIAL_STATE={
    products:[],
    message:''
}
export const reducer=(state=INITIAL_STATE,action: any)=>{
    switch(action.type){
        case'GET_PRODUCTS_SUCCESS': return {...state, products:action.payload};
        case 'GET_PRODUCTS_ERROR': return{...state, message:action.payload}
        default: return state;
    }
}

【问题讨论】：

只需在useEffect 中使用props.getProducts 并将您的依赖数组设置为[props.getProducts]。

标签： javascript reactjs typescript redux

【解决方案1】：

因此，当您在此 useEffect 中调用 get() 时，您的 console.log(props.products) 未显示任何产品的原因：

useEffect(() => {
        get()
    }, []);

是因为，useEffect 钩子只运行一次，即当组件挂载时，所以在你通过 redux 的 api 调用 await props.getProducts() 完成后，你看不到新值，因为 useEffect 钩子不会再次运行。

关于您在代码中的这条评论：当我在方括号中写 'get or get()' 时，产品循环进入控制台连续 发生这种情况是因为，每次您的组件渲染/重新渲染时，都会创建一个新的 get 引用，导致您的 useEffect 钩子再次运行，这意味着一个新的 api 调用，它返回新的结果，我相信的结果是组件的道具，导致另一个渲染，然后创建一个新的get 实例...... useEffect 再次运行......所以你留下了一个无限循环。

你可以做的是创建一个 get 的记忆版本，并将其用作 useEffect 钩子中的依赖项，即

const getProductsAsync = useCallback(async() => {
    await props.getProducts()
    console.log(props.products)
}, [props.getProducts]);

    useEffect(() => {
        getProductsAsync()
    }, [getProductsAsync]);  // Now that we have this in the dep array, this hook only gets called if there a change in reference for getProductsAsync. 
}

我个人不会这样做。我只需执行以下操作：

useEffect(() => {
    const getProductsAsync = async() => {
        await props.getProducts()
        console.log(props.products)
    };
    getProductsAsync();
}, [props.getProducts]);

还不清楚为什么在成功调用 api 后需要 useEffect 挂钩来记录产品。如果你必须对 api 调用的结果执行一些操作，我建议你在 hook 的依赖数组中添加另一个使用 products 作为依赖的 useEffect。

【讨论】：