使用 useState 掛鈎時如何訪問 this.state？

Question

我正在嘗試發送我的組件的 state object。 I was using a class component and converted it to a function utilising useState() but now I can't access the state object using this.state .

我已經通過創建一個名為state的 object 來代替它，但我猜這不是最優雅的解決方案......

export default function Contact () {
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [enquiryType, setEnquiryType] = useState("General Enquiry")
    const [message, setMessage] = useState("")

    const state = {
        name,
        email,
        enquiryType,
        message
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(state) // vs this.state
        var service_id = "default_service";
        var template_id = "message_template";
        var user_id = "user_[whatever]"
        emailjs.send(service_id, template_id, state, user_id); // vs this.state
    }

}

Answer 1

您已將 state 分解為 4 個不同的狀態。 您也可以單獨使用這些狀態，但如果您想將這些狀態合並到 1 個 object 中，我建議您研究useReducer鈎子。 您可以閱讀肯特 C。 多茲發帖進行比較。

Answer 2

如果我正確地關注了你的問題，你可以使用 useReducer 或者如果你想使用 useState，你可以試試這個方法：

const initialStates={...yourObject}
const [state,setState]=useState(initialStates)

然后將其傳遞為 state