How do you save/post using axios correctly

Question

I using Spring boot has backend and react-redux has frontend. The problem is where I try too save my data to my db the first click just save my first entity out of seven. After the second click it works normal and afterwards it works normal. I have try useEffect still the same problem.

export const setChecklist = (Checklist) => {return (dispatch) => {
console.log(Checklist);
axios
  .post("http://localhost:8081/api/checklist/addList", Checklist)
  .then((response) => {
    console.log(response);
    dispatch({
      type: SET_CHECKLIST,
      payload: response.data,
    });
  })
  .catch((error) => {
    console.log(error);
  }); 
};
};

Answer 1

try this code:

export const setChecklist = async (Checklist)  => {
    const response = await axios
  .post("http://localhost:8081/api/checklist/addList", Checklist)
  .then((response) => {
    console.log(response);
    dispatch({
      type: SET_CHECKLIST,
      payload: response.data,
    });
  })
  .catch((error) => {
    console.log(error);
  });

  }


  useEffect(() => {
    setChecklist ()
      .then((res) => {
        setChecklist(res)
      })
      .catch((e) => {
        console.log(e)
      })
  }, [])