React useState in useEffect not set value

Question

I'm new to React JS so I don't know where I'm wrong. My code is like this:

const ExamDetails = (props) => {
    const { exam_id } = useParams();
    const [examInfor, setExamInfor] = useState([]);

    useEffect(async () => {            
         let formData = new FormData();
            formData.append('exam_id', exam_id);
            await axios({
                method: 'POST',
                url: "http://localhost/itenglish_capstone/server/public/api/refer_exam",
                dataType: 'jsonp',
                data: formData
            })
            .then(response => {
                let exams = response.data.exam;
                setExamInfor(exams);   
                console.log(examInfor)   ///return [] empty array
            })
            .catch(error => {
                console.log(error)
            });   
    }, []);
    
    return (
         .....
         <Form.Field
             name='exam_name'
             label='Title'
             control={Input}
             placeholder='Exam title'
             maxLength="100"
             value={examInfor.exam_name}
         />
         .....
    )
}

My examInfor from Network preview like this:

{exam: [{exam_id: 1, exam_name: "English test for Software Engineer", it_type_id: 1, type_id: 1,…}]}
-> exam: [{exam_id: 1, exam_name: "English test for Software Engineer", it_type_id: 1, type_id: 1,…}]
  ->  0: {exam_id: 1, exam_name: "English test for Software Engineer", it_type_id: 1, type_id: 1,…}
    ->  exam_desc: "English test for Software Engineer"
        exam_id: 1
        exam_name: "English test for Software Engineer"
        it_type_id: 1
        type_id: 1

I can't set value for my input Title. What's wrong with my code? I try to use setTimeout for useEffect but it still not working. I

React useState in useEffect not set value

0 Answers0