Reactjs 如何在axios PUT请求后更新组件

我正试图找到解决我问题的办法。 情况就是这样： 我有一个EducationComponent，它包含GET请求（使用axios），然后返回所有EducationArray的.map，但是.map创建的每个项目的呈现都在另一个组件EducationItemComponent中，该组件包含一个带有表单的折叠，您可以使用PUT请求（使用axios）在数据库中编辑该项目

一切都很好，即使我确信我制造了很多混乱，当然这会是实现我的应用程序的一些更简单的方法，但我对React和JSX非常陌生，这是我现在能做的最大限度

我想做的是： 一旦我填写了表格并提交了它，并且PUT请求更改了我数据库中的数据，我想重新呈现该项目并立即查看我所做的更改，但我找不到任何方法来执行此操作

以下是EducationComponent中的代码：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';

import { addEducation } from '../../redux/actions/educationActions';
import { EducationItem } from './EducationItemComponent';

export const Education = () => {

    const education = useSelector((state) => state.education.education);

    const { id, school, date, description } = education ?? {};

    const dispatch = useDispatch();

    const fetchEducation = async (id, school, date, descr) => {
        const response = await axios
            .get('http://localhost:3005/education')
            .catch((err) => {
                console.log('Err', err);
            });
        dispatch(addEducation(response.data));
        console.log(response.data[0].school);
    }

    useEffect(() => {
        fetchEducation();
    }, []);

    return (
        <div className="education clearfix">
            <h2 className="small-heading">EDUCATION</h2>
            <div className="education-container col-lg-10 col-lg-offset-1 col-md-12 col-md-offset-0 col-sm-10 col-sm-offset-1">

                { /* Education items */}
                {education.map(educ =>
                    <>
                        <EducationItem key={educ.id} id={educ.id} school={educ.school} descr={educ.description} date={educ.date} />
                    </>
                )}
            </div>
        </div>
    );
}

这就是教育减速器：

import * as ActionTypes from '../constants/ActionTypes';

const initialState = {
    education: [],
}

export const educationReducer = (state = initialState, { type, payload }) => {
    switch (type) {
        case ActionTypes.ADD_EDUCATION:
            return { ...state, education: payload };
        default:
            return state;
    }
}

---

此操作的作用是什么？您是否也可以添加该代码？这里的问题是，在将数据放入DB后，您没有更新redux存储，因此您的数据没有得到更新。为了实现同样的目的，您只需在

putEducation

内部调用调度来更新存储的一部分，并确保您也传递了调度实例。addEducation只是从调度中获取数据并将其加载到有效负载中。export const addededucation=（education）=>{return{type:ActionTypes.ADD_education，payload:education}；}；我可以在帖子中添加代码，以便更清晰。我没有考虑从putEducation请求中再次发送，我可以试试看它是否有效。

import * as ActionTypes from '../constants/ActionTypes';

export const addEducation = (education) => {
    return {
        type: ActionTypes.ADD_EDUCATION,
        payload: education
    };
};

import * as ActionTypes from '../constants/ActionTypes';

const initialState = {
    education: [],
}

export const educationReducer = (state = initialState, { type, payload }) => {
    switch (type) {
        case ActionTypes.ADD_EDUCATION:
            return { ...state, education: payload };
        default:
            return state;
    }
}