Next.js中使用useReducer获取textarea值失败求助

你的问题根源是textarea的事件属性拼写错误：你写的是OnChange（大写O），但React的事件处理属性要求小驼峰命名，正确的应该是onChange。这个错误导致输入时根本没有触发setFormData，所以formData始终是空对象。

修复后的代码 #

import Success from "../../components/singleElements/Success"
import Error from "../../components/singleElements/Error"
import { useQueryClient, useMutation } from "react-query"
import { addOnePub, getPub } from "../../lib/helper"
import { useReducer } from "react"

export default function Insertpub(){
// 使用该reducer获取数据
  const formReducer = (state, event) => {
    return {
      ...state,
      [event.target.name]: event.target.value,
    };
  };
// 监听文本框变化
  const [formData, setFormData] = useReducer(formReducer, {});
  
    const queryClient = useQueryClient()
    const addMutation = useMutation(addOnePub, {
        onSuccess : () => {
            queryClient.prefetchQuery('pub', getPub)
        }
    })

    const handleSubmit = (e) => {
      
        e.preventDefault();
        
        if(Object.keys(formData).length == 0) return console.log("Don't have Form Data");

        let {pub} = formData;
        const model = {
            pub
        }

        addMutation.mutate(model)
        console.log("the data is correctly inserted")
    }

    if(addMutation.isLoading) return <div>Loading!</div>
    if(addMutation.isError) return <Error message={addMutation.error.message}></Error>
    if(addMutation.isSuccess) return <Success message={"Added Successfully"}></Success>
    return (
        <form  onSubmit={handleSubmit}>
            <textarea
              className="bg-gray-200 w-full rounded-lg shadow border p-2"
              rows="5"
              placeholder="Ecrivez votre publication ici"
              onChange={setFormData} {/* 修正事件属性名称 */}
              name="pub"
              id="pub"
             
            ></textarea>

            <div className="w-full flex flex-row flex-wrap mt-3">
              
              <div className="w-2/3">
                <button
                  type="submit"
                  className="float-right bg-indigo-400 hover:bg-indigo-300 text-white p-2 rounded-lg"
                >
                  Publier
                </button>
              </div>
            </div>
          </form>
    )
}

只需要修改这一处，输入时就能正常触发reducer更新formData，提交时就能获取到输入内容了。

内容的提问来源于stack exchange，提问作者Aro