时间戳

首页 > 解决方案 > 在 reactjs 中使用 axios 插入选择的值

javascript - 在 reactjs 中使用 axios 插入选择的值

问题描述

我正在 React.Js 中开发一个应用程序，由于某种原因，它没有保存在选择中选择的值。

    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;

当我选择它时，它似乎取值，你可以看到handleChangeDateif put a console.log，但addDate它没有取值。

我该如何解决它，建议？

标签： javascriptjsonreactjsapiaxios

解决方案

只需查看您的代码，很明显您实际上并没有在addDate处理程序中使用正确的数据。

您需要state在参数中传递值，甚至更好地直接在回调中传递，如下所示：

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

由于您没有传递任何参数，因此您也可以onClick像这样改进回调：

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

另一个细节，将对象属性设置为小写值更为常见，Name因此name.

推荐阅读