仅当状态改变时才使用效果

Posted 2023-02-19

【中文标题】仅当状态改变时才使用效果

【英文标题】：useEffect only if state changed

【发布时间】：2020-08-10 16:12:42

【问题描述】：

我有useEffect，它从redux 调用action 来获取上传

useEffect(() => 
    getUploads()
, [getUploads])

但是，我只想在状态更改时获取，而不是在每次组件呈现时获取。 我已经将状态映射为：

filteredUploads.map((image, i) =>  return (...) )

我尝试将getUploads、filteredUploads、filteredUploads.length 添加为依赖数组。一个都没用。

我的redux-action：

export const getUploads = () => async dispatch => 
    try 
        dispatch( type: 'LOADING', payload: true )

        const res = await axios.get('/uploads/myuploads')
        dispatch(
            type: GETMYUPLOAD_SUCCESS,
            payload: res.data
        )

     catch (err) 
        const error = err.response.data.error[0].msg

        dispatch(setAlert(error, 'danger'))
    

mapStatetoProps:

function mapStateToProps(state) 
    const  myuploads, searchField  = state.useruploads;
    return 

        searchField: state.useruploads.searchField,

        filteredUploads: myuploads.filter((upload) => upload.caption.toLowerCase().includes(searchField.toLowerCase()))
    ;

【问题讨论】：

你也可以分享getUploads吗？

useEffect 每次更改此函数时都会调用 getUploads：建议您使用 useCallBack 来定义它

能否分享一下组件代码

为了提供解决方案，了解getUploads是如何实现的以及在哪里实现的非常重要

useEffect 的问题是在每次重新渲染时运行（次数过多）还是仅在装载时运行（次数不足）？

【参考方案1】：

要在状态更新时调用useEffect 挂钩，只需将相关状态变量包含在useEffect 的依赖数组中（传递给useEffect 的第二个参数）。

解决useEffect 在组件的每次渲染时被调用：这是因为getUploads 在每次渲染时都被重新定义。要解决此问题，您可以使用 useDispatch redux 挂钩。这不是（假设您当前正在使用）mapDispatchToProps。

这是一个完整的例子：

import  useDispatch  from 'react-redux'
import  getUploads  from "./redux-actions";


const MyComponent = props => 
    const dispatch = useDispatch();
    
    const [state, setState] = React.useState();
    
    useEffect(() => 
        dispatch(getUploads());
    , [dispatch, state]);

    // rest of component

【讨论】：

你能解释一下吗？没看懂