React js useReducer 鈎子在表單控制輸入中

Question

我在將 useReducer 與輸入一起使用時遇到問題。 我試圖在這里使用受控輸入，但我不斷收到錯誤； 受控輸入不受控制

import React, {useReducer, useEffect} from "react";

從“axios”導入 axios；

常量初始狀態 = {

post: {},

user: ""

} const reducer = (state, action) => {

switch(action.type){

    case "Fetch_data":

        return {

            post: action.payload

        }

    case "On_change":

        return {

            user: action.payload

        }    

    case "Fetch_error":

        return {

            post: {}

        } 

    default:

        return state  
 
}

} const ReducerFetchdata = () => {

const [info, dispatch] = useReducer(reducer, initialState)

useEffect(()=>{

    axios

        .get(`https://jsonplaceholder.typicode.com/posts/${info.user}`)

        .then (res => {

            console.log(res)

            dispatch({type: "Fetch_data", payload: res.data})

        })

        .catch(err => {

            console.log(err)

            dispatch({type: "Fetch_error"})

        })

}, [info.user])

const handleChange = (event) =>{

    dispatch({type: "On_change", payload: event.target.value})

}

return(

    <div>

        <input type="text" onChange={handleChange} value={info.user}/>

        <p>{info.post.title}</p>

    </div>

)

}

導出默認的 ReducerFetchdata

Answer 1

只是猜測：您在獲取帖子后刪除了user密鑰，因此info.user變得未定義。

你的減速機應該是：

switch(action.type) {
  case 'Fetch_data':
    return {
       ...state,
       post: action.payload
    }
   ...
}

總是回來

{
   ...state
   [someKey]: someValue
}

在您的On_Change和Fetch_error中也是如此。

Answer 2

您需要傳播整個狀態，然后在從減速器返回時更新必要的鍵。 在這種情況下， onChange調用了On_change其操作沒有從reducer狀態返回post ，從而導致錯誤。

參考： 沙盒修復