Question

如何在useEffect中使用自定义方法？如果我创建了很多组件并且它们使用相同的提取函数，那么我应该在每个组件的效果中声明提取函数？该功能执行相同的工作？

据我所知，如果我想在useEffect中使用组件的状态，我应该像示例1一样在useEffect中声明并调用该函数。

但是我想声明其他js文件的功能。因为它被称为其他组件。

根据Dan Abramov（https://overreacted.io/a-complete-guide-to-useeffect/），如果我想移动函数，则必须使用useCallback方法。但是我不太了解。请给我这个问题的任何建议。

1. Component.js
const Component = () => {
    const [id,setId] = useState(0);
    const dispatch = useDispatch();

    useEffect(() => {
        fetch(`url/${id}).then(res => dispatch({type: success, payload: res}))
    },[id])
}

2. Component.js 
const Component = () => {
    const [id, setId] = useState(0);

    useEffect(()=> {
        callApi(id)
    },[id])
}

Api.js
const callApi = (id) => {
    const dispatch = useDispatch();
    return fetch(`url/${id}).then(res => dispatch({type:success, payload:res})
}

Answer 1

我应该在每个组件的作用中声明提取功能吗？

以相同的提取功能提取custom hook，useFetch()。

// custom hook
const useFetch = (id) => {
    const [data, setData] = useState(null);

    useEffect(
      () => {
        async function fetchData() {
          const res = await fetch(`url/${id})
          setData(res);
        }
        fetchData();
      }, [id] // id as dependency
    )

    return data;
}

// sample component using custom hook
const Component = (props) => {
    const dispatch = useDispatch();
    const data = useFetch(props.id); // use custom hook

    useEffect(
      () => {
        if (data) {
          dispatch({type: success, payload: data});
        }
      }, [data] // dispatch every time data changes
    )
}

Answer 2

由于多个组件在useEffect中执行相同的操作，因此您可以将代码提取到自定义钩子中，并在所有组件中使用

useFetch.js

monthlySeq1.Series.Add(
                new StackedColumnSeries
                {
                    Title = "Maintenance",
                    Values = new ChartValues<double> { MtMS1D[1], MtMS1D[2], MtMS1D[3], MtMS1D[4], MtMS1D[5], MtMS1D[6], MtMS1D[7], MtMS1D[8], MtMS1D[9], MtMS1D[10], MtMS1D[11], MtMS1D[12], MtMS1D[13], MtMS1D[14], MtMS1D[15], MtMS1D[16], MtMS1D[17], MtMS1D[18], MtMS1D[19], MtMS1D[20], MtMS1D[21], MtMS1D[22], MtMS1D[23], MtMS1D[24], MtMS1D[25], MtMS1D[26], MtMS1D[27], MtMS1D[28], MtMS1D[29], MtMS1D[30], MtMS1D[31] },
                    StackMode = StackMode.Values,
                    ColumnPadding = 0.5,
                    Fill = System.Windows.Media.Brushes.WhiteSmoke,
                    StrokeThickness = 0.7,
                    Stroke = System.Windows.Media.Brushes.Black
                });

现在您可以在组件中编写

export const useFetch = () => {
    const dispatch = useDispatch();

    useEffect(() => {
        fetch(`url/${id}).then(res => dispatch({type: success, payload: res}))
    },[id])
}

如何在UseEffect中使用自定义方法？

2 个答案: