Uncaught TypeError: Cannot read property of undefined (read 'img1') in promise

Question

I'm using react.js

async function Banners(props) {
  const response = await axios.get(`${apiUrl}/assets/get`);

  return (
    <MainContent
      text={response.text}
      img1={props.img1 ? props.img1 : response.data.img1}
      img2={props.img2 ? props.img2 : response.data.img2}
    />
  );
}

The error will only occur when "async" is present

Answer 1

You need to wrap the asynchronous API call in useEffect Hook and store the data in the state so that you can use the state in the render function. Here is a sample code without tests:

function Banners(props) {
  const [response, setResponse] = useState([]);

  const fetchData = async () => {
    const response = await axios.get(`${apiUrl}/assets/get`);
    setResponse(response);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <MainContent
      text={response.text}
      img1={props.img1 ? props.img1 : response.data.img1}
      img2={props.img2 ? props.img2 : response.data.img2}
    />
  );
}