React setState предоставляет массив emty в запросе axiosRequest

#reactjs #axios

Вопрос:

Привет, я действительно должен следовать упрощенному коду. Я использую Formik в качестве проверки. Также материал пользовательского интерфейса и Reactjs. Теги формы, строки и столбца взяты из материала. Быстрое поле совпадает с полем ввода.

Что я хочу, так это щелкнуть в поле ввода, появится выпадающее меню и отобразит массив, который я получил с помощью запроса axios.

´´´

 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>
                       )

Когда я проверяю свою консоль, я получаю с первой консоли.запишите имя
поля ввода. Вторая консоль.журнал говорит, что массив пуст,
несмотря на то, что разрешение доступно и должно быть установлено. Почему это так не работает
?

Ответ №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:

Я не думаю, что изменения произошли в детстве. Попробуйте ввести значения поиска через секунду или что-то в этом роде, чтобы понять, в чем проблема.

 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(...)