React setState 在 axios 请求中给出空数组答案

【问题标题】：React setState gives emty array in an axiosRequestReact setState 在 axios 请求中给出空数组
【发布时间】：2021-10-05 22:02:35
【问题描述】：

您好，我必须遵循简化的代码。我使用 Formik 作为验证。还有 Material Ui 和 Reactjs。 Form、Row 和 Col 标签来自 Material。 FastField 与 InputField 相同。

我想要的是在输入字段中的 onClick 出现一个下拉菜单并显示我使用 axios-Request 获取的数组。

´´´

const url = 'http://localhost:3000';
const [searchValues, setSearchValues] = useState([]);


const getDropdownItems = (event) => {
    console.log('event', event.target.getAttribute('id'));
        axios
        .get(`${url}/${event.target.getAttribute('id')}`)
        .then(
            (res) => setSearchValues(res),
            console.log('restl', searchValues)
        );
};
        
             render(
                    <Form
                        onFocus={getDropdownItems}
                        onSubmit={formik.handleSubmit}
                         >
                                <Row>
                                    <Col xs="auto" style={minWidth}>
                                        <FastField
                                            id="DatumEingabe"
                                            name="DatumEingabe"
                                            component={Autocomplete}
                                            label="Datum-Eingabe"
                                            type="text"
                                            options={searchValues}
                                        />
                                    </Col>
                                </Row>
                            </Form>
                       )

当我检查我的控制台时，我从第一个 console.log 中获得了输入字段。第二个 console.log 说数组是空的，尽管 res 可用并且应该设置。为什么它不起作用这边。

【问题讨论】：

你这里有一个错字.then((res) => {setSearchValues(res); console.log('restl', searchValues)});

标签： reactjs axios

【解决方案1】：

setSearchValues(res) 在下一次渲染之前不会更新searchValues。如果您想在每次更改时记录它，您应该这样做

const [searchValues, setSearchValues] = useState([]);
useEffect(() => {
    console.log(searchValues);
}, [searchValues]);

const getDropdownItems = (event) => {
    console.log('event', event.target.getAttribute('id'));
    axios
      .get(`${url}/${event.target.getAttribute('id')}`)
      .then(
        (res) => setSearchValues(res)
    );
};

【讨论】：

【解决方案2】：

我不认为更改是立即进行的。尝试在一秒钟或类似的时间后记录 searchValues 以查看是否是问题所在。

const getDropdownItems = (event) => {
console.log('event', event.target.getAttribute('id'));
    axios
    .get(`${url}/${event.target.getAttribute('id')}`)
    .then(
        (res) => {
            setSearchValues(res);
            setTimeout(() => {
                console.log('restl', searchValues);
            }, 1000)
        }
    );
};

此外，您还有 useEffect 挂钩，它会在变量更改时触发一个事件，因此如果您想在它发生更改的第二秒记录它，您应该使用：

useEffect(() => {
    console.log(searchValues);
}, [searchValues])

要做到这一点，记得导入：

import { useEffect } from "react";

或使用

React.useEffect(...)

【讨论】：

为什么不立即制作？
试试那个代码，我真的不知道为什么它没有立即生成，但我曾经遇到过同样的问题