Inilah masalah saya: Saya menggunakan komponen fungsional kait reaksi dengan kait useState yang lebih baru. Hook useState mengembalikan fungsi updater yang digunakan untuk memperbarui status tersebut. Fungsi updater adalah masalah yang saya alami dan ini adalah pengetahuan umum tentang cara kerja React. Status tidak diperbarui hingga dom dirender ulang. Tapi saya perlu mengirim data formulir onSubmit melalui axios (atau fetch).

const App = () => {
    const [username, setUsername] = useState('')

    const handleSubmit = (e) => {
        e.preventDefault()
        setUsername(e.target.elements.form1.value)
        axios.post('http://localhost:3000/api', { name: username })
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="form1" placeholder="Enter name:" />
                <button type="submit">Submit</button>
            </form>
        </div >
    )
}

Dalam kode ini ketika formulir dikirimkan dengan peristiwa onSubmit pada tag formulir, fungsi handleSubmit() dipanggil. Di sini fungsi pembaru setUsername() akan memperbarui sate dan axios menjalankan panggilan pos ke server backend. Tetapi axios.post hanya akan selalu mengirimkan nilai status sebelumnya karena fungsi setUsername() tidak akan selesai sampai dom dirender ulang. Jadi data yang masuk ke backend selalu muncul satu langkah di belakang.

Apa metode terbaik untuk melakukan ini dengan benar? Dengan input formulir saya, saya tidak benar-benar membutuhkannya untuk dirender ke dom, saya hanya perlu info formulir untuk diteruskan ke backend. Haruskah saya tidak memasukkan data ini ke negara bagian? Dan jika demikian, apa cara terbaik untuk melakukan ini dengan formulir besar; katakan 10 nilai input?

Saya juga telah melihat orang menggunakan value={some state value} dalam formulir input untuk pengikatan dua arah; tapi itu membuat menggunakan lebih dari satu input dalam bentuk sangat sulit menggunakan kait. Kecuali ada cara ajaib yang saya lewatkan.

Saya belum pernah melihat cara 'standar' melakukan axios atau mengambil panggilan sebagai reaksi dengan Hooks. Saya telah banyak mencari di web tetapi sepertinya tidak ada banyak informasi tentangnya.

1
Eric Christensen 20 September 2019, 19:18

1 menjawab

Jawaban Terbaik

state pembaruan adalah async (dengan hooks nilainya hanya akan diperbarui pada render berikutnya).

Tapi Anda sudah tahu seperti apa value penyebabnya sudah ada di dalam lingkup Anda. Berikan saja ke axios

const App = () => {
    const [username, setUsername] = useState('')

    const handleSubmit = (e) => {
        e.preventDefault()
        const { value } = e.target.elements.form1
        setUsername(value)
        axios.post('http://localhost:3000/api', { name: value })
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="form1" placeholder="Enter name:" />
                <button type="submit">Submit</button>
            </form>
        </div >
    )
}
8
Dupocas 16 Juli 2020, 11:29