0

我的 react 应用程序使用 redux 连接组件从后端为项目页面呈现数据，因此我在 React Hook useEffect 中调用了 GET 调度，以确保在项目页面首次打开时始终呈现数据，并且只要有更改state project，组件将使用 connect redux 函数进行相应更新。但是，在我使用 DELETE API 请求减少新状态后，组件不会更新，只有当我发送另一个 GET 请求时，才会更新状态。所以我必须调用 2 个调度，一个用于 DELETE，一个用于 GET 以同步更新页面（正如您在handleDeleteUpdate函数中看到的那样），当我调度 POST 请求以添加更新时，同样的事情发生了（在handleProjectUpdate）。只有当我重新加载页面时，新更改的数据才会显示，否则不会同步发生，有人知道我的代码中的状态更新有什么问题吗？以及如何解决此问题，以便仅通过一个请求即可更快地加载页面？

我已经更改了减速器以确保状态没有发生突变并且正确更新。我也尝试在 handleDeleteUpdate 中使用异步函数来确保动作调度完成

我努力了

console.log(props.project.data.updates)

调用 props.deleteUpdate 后打印出更新列表，但updates状态中的列表似乎从未更改，但是当我重新加载页面时，updates会显示新列表

这是我为主要连接的 redux 组件、操作和组件的 reducers 文件的代码

function Project(props) {
    let options = {year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'}
    const {projectID} = useParams();
    const history = useHistory(); 
    console.log(props.project.data? props.project.data.updates : null);
    console.log(props.project.data);
    // const [updates, setUpdates] =  useState(props.project.data? props.project.data.updates : null)
    useEffect(() => {
        props.getProject(projectID);
    }, []);
    
    // Add an update to project is handled here
    const handleProjectUpdate = async (updateInfo) => {
        await props.postProjectUpdate(projectID, updateInfo)
        await props.getProject(projectID);
        

    }
   

    const handleDeleteUpdate = async (updateID) => {
        await props.deleteUpdate(projectID, updateID);
        
        await props.getProject(projectID);
        console.log(props.project.data.updates);
    };

    return (
        <div>
            
            <Navbar selected='projects'/>  
            <div className = "project-info-layout">
                
                     <UpdateCard
                         updates = {props.project.data.updates}
                         handleProjectUpdate = {handleProjectUpdate}
                         handleDeleteUpdate = {handleDeleteUpdate}
                         options = {options}
                        
                     />

               </div>
         
        </div>
        
    )
}

const mapStateToProps = state => ({
    project: state.project.project,
});

export default connect(
    mapStateToProps, 
    {getProject, postProjectUpdate, deleteUpdate}
)(Project);

行动

import axios from 'axios';
import { GET_PROJECT_SUCCESS,ADD_PROJECT_UPDATE_SUCCESS, DELETE_PROJECT_UPDATE_SUCCESS} from './types';


let token = localStorage.getItem("token");

const config = {
    headers: {
        Authorization: `Token ${token}`,
    }
};
export const getProject = (slug) => dispatch => {
    axios.get(`${backend}/api/projects/` + slug, config)
        .then(
            res => {
                dispatch({
                    type: GET_PROJECT_SUCCESS,
                    payload: res.data,
                });                
            },
        ).catch(err => console.log(err));
}



export const postProjectUpdate = (slug, updateData) => dispatch => {
    axios.post(`${backend}/api/projects/`+slug+ `/updates`,updateData, config)
        .then(
            res => {
                dispatch({
                    type: ADD_PROJECT_UPDATE_SUCCESS,
                    payload: res.data,
                });
            },
        ).catch(err => console.log(err));
}

export const deleteUpdate = (slug, updateID) => dispatch => {
    axios.delete(`${backend}/api/projects/`+ slug + `/updates/`+ updateID, config)
        .then(
            res => {
                dispatch({
                    type: DELETE_PROJECT_UPDATE_SUCCESS,
                    payload: updateID,
                });
            },
        ).catch(err => console.log(err));
}

减速器

 import { GET_PROJECT_SUCCESS,ADD_PROJECT_UPDATE_SUCCESS, DELETE_PROJECT_UPDATE_SUCCESS} from "../actions/types";

const initialState = {
  project: {},

};

export default function ProjectReducer(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_PROJECT_SUCCESS:
      return { 
        ...state, // return all initial state
        project: payload
      };
    
    
    
    case ADD_PROJECT_UPDATE_SUCCESS:
      return {
        ...state,
        project: {
          ...state.project,
          updates: [...state.project.data.updates, payload.data]
        }
      };
    case DELETE_PROJECT_UPDATE_SUCCESS:
      let newUpdatesArray = [...state.project.updates]
      newUpdatesArray.filter(update => update.uuid !== payload) 
      return {
        ...state,
        project: {
          ...state.project,
          members: newUpdatesArray
        }
      };
    
    default:
      return state;
  }
}

项目组件中的 updateCard 显示所有更新的列表

4

0 回答 0