在 useEffect 中使用 useDispatch 获取数据（代码工作但有错误）答案

【问题标题】：Data fetching with useDispatch inside useEffect (code work but with error)在 useEffect 中使用 useDispatch 获取数据（代码工作但有错误）
【发布时间】：2020-09-06 00:21:19
【问题描述】：

我尝试使用 useEffect 通过 useDispatch 钩子从 API 获取数据：

  const dispatch = useDispatch();

  useEffect(() => {dispatch(actions.fetchSearch(submitValue))}, [submitValue, dispatch]);

submitValue - 它是搜索查询的输入值。 fetchSearch() 看起来像这样：

export const fetchSearch = (query) => {
return dispatch => {
    const queryParams = 'http://190.75.199.65/api/products?count=20&sort_by=numberOfEntries&sort_order=DESC&page=1&search='+query;
    axios.get(queryParams)
    .then( res=> {
            dispatch(fetchSearchSuccess(res.data));
        }
    )
};

};

我可以通过这段代码获取数据，但是一直出错：

效果函数不能返回除函数之外的任何内容，用于清理。

看起来你写了 useEffect(async () => ...) 或者返回了一个承诺。相反，在你的效果中编写异步函数并调用马上

我尝试在 useEffect 中创建异步函数，但错误相同，或者我做错了什么。

【问题讨论】：

标签： reactjs react-redux use-effect

【解决方案1】：

尝试这样做：

const dispatch = useDispatch();

useEffect(() => {
    (async () => {
     await dispatch(actions.fetchSearch(submitValue));
    })();
}, [submitValue, dispatch]);

我认为这是因为您直接调用了一个异步函数，并且它在 useEffect 中返回了一个承诺。

【讨论】：

嘿嘿，尝试在内部函数中添加异步
代码现在可以工作了，我忘了删除另一个useEffect！非常感谢！

【解决方案2】：

代码无需任何更改即可工作

const dispatch = useDispatch();

useEffect(() => {dispatch(actions.fetchSearch(submitValue))}, [submitValue, dispatch]);

只是忘记删除旧的 useEffect。

【讨论】：