Saya sedang mengembangkan aplikasi di React.Js dan untuk beberapa alasan itu tidak menyimpan nilai yang dipilih di pilih.

    const App = () => {
        // is obtained from another api: REQUEST_API_GET
        const Dates = dates.map(item => ({
            value: item.Name,
            label: item.Name,
        }));
    
        const [date, setDate] = React.useState({
            Name: ''
        });
    
        function handleChangeDate(event) {
            setDate({
                Name: event.value
              })
        }
    
        const addDate = (date) => {
            axios.post(`${REQUEST_API_POST}`, {date});
        };
    
        return (
            <>
                <div>
                    <NoSsr>
                        <Select
                            classes={classes}
                            styles={selectStyles}
                            inputId="date"
                            TextFieldProps={{
                                label: 'Date',
                                InputLabelProps: {
                                htmlFor: 'date',
                                shrink: true,
                                },
                                placeholder: 'Search',
                            }}
                            options={date}
                            components={components}
                            value={date.Name}
                            onChange={handleChangeDate}
                        />
                    </NoSsr>
    
                    <a onClick={() => addDate()}>add</a>
                </div>
            </>
        )
    }

export default App;

Tampaknya mengambil nilai ketika saya memilihnya, Anda dapat melihat di handleChangeDate jika menempatkan console.log, tetapi di addDate tidak mengambilnya.

Bagaimana saya bisa memperbaikinya, saran?

1
bonnegnu 24 Desember 2020, 00:12

3 jawaban

Jawaban Terbaik

Saat memanggil fungsi addDate() Anda tidak meneruskan argumen apa pun, tetapi dalam parameter Anda, Anda telah menetapkan tanggal sebagai parameter (itu juga tanpa nilai default). Saya pikir Anda mencoba mengakses nilai tanggal, yang merupakan status, dan status dapat diakses di mana saja dalam fungsi, jadi tidak perlu meneruskannya sebagai parameter .

enter code here
const addDate = () => {
    axios.post(`${REQUEST_API_POST}`, {date});
}; 

Gunakan ini dan itu akan berfungsi dengan baik

Anda juga dapat melewatkan tanggal (status) sebagai argumen dalam fungsi Anda addData, sesuatu seperti ini(addData(date)) dan ini juga akan berfungsi. tetapi pendekatan pertama lebih baik

1
Siddharth Agrawal 23 Desember 2020, 21:38

Tanggal variabel yang Anda gunakan di addDate bukanlah hook. Hapus saja parameter tanggal.

    const addDate = () => { // <-- no date in input
        axios.post(`${REQUEST_API_POST}`, {date});
    };
2
e.instein 23 Desember 2020, 21:21

Hanya dengan melihat kode Anda, sudah jelas bahwa Anda tidak benar-benar menggunakan data yang tepat di handler addDate Anda.

Anda harus meneruskan nilai state di param atau bahkan lebih baik secara langsung di panggilan balik Anda sebagai berikut:

const addDate = () => {
    axios.post(`${REQUEST_API_POST}`, {date}); // here your date is your state!
};

Karena Anda tidak melewatkan parameter apa pun, Anda dapat meningkatkan panggilan balik di onClick Anda seperti itu juga :

<a onClick={addDate}>add</a>

Detail lain, lebih umum untuk memiliki properti objek Anda sebagai nilai huruf kecil sehingga Name menjadi name.

2
Eugen Sunic 23 Desember 2020, 21:24