如何在反应中使用上下文 api 将数据添加到其余 api？

Posted 2023-02-22

【中文标题】如何在反应中使用上下文 api 将数据添加到其余 api？

【英文标题】：how to add data to the rest api with context api in react?

【发布时间】：2021-09-20 23:35:15

【问题描述】：

我想通过操作将数据添加到 restfull api。 但是我得到了这个错误。

export const GlobalContext = createContext();
const GlobalProvider = ( children ) => 
const [userData, setUserData] = useState([]);
const [meetings, setMeetings] = useState([]);
useEffect(() => 
    fetch('http://localhost:4000/users')
        .then(res => res.json())
        .then(data => 
            setUserData(data);
            dispatch(
                type: 'CREATE_MEETING',
                paylaod: data
            )
        );
    fetch('http://localhost:4000/meeting')
        .then(res => res.json())
        .then(data => setMeetings(data));
, []);
const [state, dispatch] = useReducer(AppReducer, meetings);
//Actions
const updateProfile = (id) => 
    dispatch(
        type: 'UPDATE_PROFILE',
        payload: id
    )
;
const createMeeting = (meeting) => 
    dispatch(
        type: 'CREATE_MEETING',
        paylaod: meeting
    )
;
return (
    <GlobalContext.Provider value=
        meeting: meetings, userData, createMeeting
    >
        <MuiPickersUtilsProvider utils=DateFnsUtils>
            children
        </MuiPickersUtilsProvider>
    </GlobalContext.Provider>
)

导出默认 GlobalProvider

减速器 const reducer = (state, action) => 开关（动作类型） 案例“CREATE_MEETING”： 返回 会议：[action.payload, ...state.meetings]

    default:
        return state;

导出默认reducer；

如何使用 fetch 向 api 添加数据？

 case 'CREATE_MEETING':
        console.log(state)
        return [...state,
        fetch('http://localhost:4000/meeting', 
            method: 'POST',
            headers:  "Content-type": "Application/json" ,
            body: JSON.stringify(state)
        )
        ]  

你能帮帮我吗？

【问题讨论】：

当你在reducer中console.log(state.meetings)在return语句之前得到什么？

您确定以正确的顺序正确调用调度吗？您不打算在对http://localhost:4000/meeting fetch 的响应中调用调度吗？

我收到一个未定义的

createMeeting 操作中有错字。 paylaod 应该是 payload

【参考方案1】：

如Spreading undefined in array vs object 中所述，您在尝试传播undefined 时会遇到TypeError。

要么将您的 setMettings 包装在条件中：

data => 
    if (data) 
        setMeetings(data)
    

或者在你的 reducer 中为 state.mettings 提供默认值：

const reducer = (state, action) =>  
    switch (action.type) 
        case 'CREATE_MEETING':
            return  meeting: [action.payload, ...(state.meetings || [])]