React setState gives emty array in an axiosRequest-CodePudding

Hi I do have to following simplyfied code. I use Formik as a Validation. Also Material Ui and Reactjs. The Form, Row and Col Tags come from Material. The FastField is same as InputField.

What I want is onClick in the Inputfield a dropdown appears and shows an array which I fetched with the 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>
                       )

When I check my console I get from the first console.log the name of the Inputfield. The second console.log says the array is empty, despite the res is available and should be set. Why does it not work this way.

CodePudding user response：

setSearchValues(res) will not update searchValues until the next render. If you want to log it each time it changes, you should instead do

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

CodePudding user response：

I don't think the change is made inmediatly. Try logging searchValues after a second or something like that to see if that is the problem.

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

Also, you have the useEffect hook, which fires an event when a variable is change, so if you want to log it the second it changes you should use:

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

To acomplish that, remember to import:

import { useEffect } from "react";

or use

React.useEffect(...)