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

Question

我正在 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;

我选择的时候好像是取值，如果放console.log你可以在handleChangeDate看到，但是在addDate里面没有取值。

我该如何解决它，建议？

Answer 1

您在 addDate 中使用的变量日期不是钩子。 只需删除日期参数即可。

    const addDate = () => { // <-- no date in input
        axios.post(`${REQUEST_API_POST}`, {date});
    };

Answer 2

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

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

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

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

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

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

Answer 3

当调用 addDate() 函数时，您没有传递任何参数，但在您的参数中您已将日期指定为参数（也没有任何默认值）。我认为您正在尝试访问 date 的值，这是一个 state，并且可以在函数中的任何位置访问 state，因此无需将其作为参数传递.

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

使用它会正常工作

您还可以在函数 addData 中将日期（状态）作为参数传递，例如 像这样（addData（date）），这也可以。 但第一种方法更好