Javascript 为什么不是'；t useReducer状态呈现成功从API请求的新数据？

我有一个用于修补数据的输入表单。我希望onSubmit函数向我的useReducer发送一个呈现触发器，该触发器从我的api get请求中提取数据，并用新数据更新我的项目

现在触发器正在工作，但不会导致对其余组件进行状态重新渲染。我知道触发器正在工作，因为成功的api请求，但是新数据没有显示出来/

这是useReducer所在的父组件。然后，我将

getFinData

中运行的

useffect

中的数据传递给我的表组件，以通过状态道具发送数据

const initialState = {
    loading: true,
    error: '',
    data: []
}

const reducer = (state, action) =>
{
    switch (action.type)
    {
        case 'FETCH_SUCCESS':
            return {
                loading: false,
                data: action.payload,
                error: ''
            }
        case 'FETCH_ERROR':
            return {
                loading: false,
                data: {},
                error: "Something went wrong!"
            }
        default:
            return state
    }
}



export const Bucket = () => {
    const [state, dispatch] = useReducer(reducer, initialState)
    const { slug } = useParams();


    
    useEffect(() =>
    {
        getFinData(dispatch)(slug);
        console.log(state)
    }, [])

    return (
        <>
        <GetAboutBucketData /> //My input action lives deeply nested in GetAboutBucketData
        <GetBucketData  error={state.error} loading={state.loading} data={state.data}/>
        </>
    );

下面是

GetBucketData

：

function GetBucketData(props)
{
    const {data, loading, error} = props    
    return (
        <>
            <Tables error={error} loading={loading} data={data}/>
        </>
    );
};

export default GetBucketData;

---

如何使我的useReducers状态导致重新呈现？

您可以将useEffect的逻辑提取到一个函数中，在useEffect中调用该函数，并将其传递到表单，以便在中调用。然后在onSubmit中回调

[更新]

这是无效的，因为我们这里有来自React的useReducer，而不是Redux reducer。

您可以将函数提取到单独的文件中，并提供更高阶函数的分派。请记住，这不是最干净的解决方案，提升状态和获取函数会更好

//bucket-api.js

export const getFinData = (dispatch) => (slug) => axiosInstance
        .get('bucket/fin-data/' + slug)
        .then(response => {
            dispatch({ type: 'FETCH_SUCCESS', payload: response.data })
        })
        .catch(error => {
            dispatch({ type: 'FETCH_ERROR' })
        })

然后在这两个文件中，您可以简单地这样称呼它：

const dispatch = useDispatch();
getFinData(dispatch)(slug);

---

有没有其他方法可以在不传递数据的情况下做到这一点？这些公司是兄弟公司。您可以使用将函数提取到外部模块并将其导入这两个位置。不过，这需要将调度程序作为依赖项传递，这不是最优雅的方式。您还可以使用react thunk，并在这两个地方发送thunk。thunk将发送请求成功操作并触发重新提交程序。您能给我一个示例，说明extract函数在外部模块上的外观吗？如果它们是兄弟，您也可以提升该状态，这可能是最容易实现的状态。更新了答案。

//bucket-api.js

export const getFinData = (dispatch) => (slug) => axiosInstance
        .get('bucket/fin-data/' + slug)
        .then(response => {
            dispatch({ type: 'FETCH_SUCCESS', payload: response.data })
        })
        .catch(error => {
            dispatch({ type: 'FETCH_ERROR' })
        })

const dispatch = useDispatch();
getFinData(dispatch)(slug);