自定义hook如何实现回调函数？

Question

比如一个数据列表，dataList，需要好几个接口来拼装数据，所有接口完成后，再吐一份数据出去。

另外，希望使用的时候可以有一个回调函数。接口请求成功，回调一下这个函数。暂时用参数传入。

定义

export const useDataList = (callback)=>{
    const [dataList, setDataList]= useState();

    useEffect(()=>{
        Promise.all([request1, request2, request3])
            .then((res)=>{
                const dataList = filter(res);
                setDataList(dataList);
                callback();
            })
    },[])

    return {dataList};
}

使用

const {dataList} = useDataList(callback);

const callback = ()=>{

}

各位这种需要回调函数的，要怎么写，只能参数传入吗？

不用纠结这个场景，这个场景只是例子

Answer 1

都讲了 “回调” 二字，肯定还是传入一个回调参数更好，因为回调函数的内容和函数参数一样，是外部决定的，不是当前自定义hook内部逻辑。建议名称可以更具象化，比如 ‘onSuccess’

Answer 2

你也可以参考react-redux中useSelector的方式, 多余的副作用交给使用者自己处理，使用者只需要最后return出想要的值就行了，你的hooks也只用关心数据的处理。

简单示例(并没有处理异步的情况，如果你需要等到数据回来才触发或者需要多次触发，需要自己调整)：

const callback = () => { xxx };

const data = useDataList((state) => {
    callback();
    return state.dataList;
});

export const useDataList = (callback)=>{
    const [state ,setState] = useState({ dataList: [] });

    useEffect(()=>{
        Promise.all([request1, request2, request3])
            .then((res)=>{
                const data = filter(res);
                setState({ dataList: data});
            })
    },[]);

    return callback(state);
}