Nicht erfasster TypeError: Die Eigenschaft von undefiniert (lesen Sie „img1') im Versprechen kann nicht gelesen werden

Question

Ich verwende React.js

asynchrone Funktion Banners(props) {
  const Response = waiting axios.get(`${apiUrl}/assets/get`);

  zurückkehren (
    <MainContent
      text={response.text}
      img1={props.img1 ? props.img1 : Response.data.img1}
      img2={props.img2 ? props.img2 : Response.data.img2}
    />
  );
}

Der Fehler tritt nur auf, wenn „async“ vorhanden ist

Answer 1

您需要在useEffect Hook中包装异步API调用，并将数据存储在状态中，以便在渲染函数中使用该状态。以下是一个没有测试的示例代码：

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