概述：

我试图将一些内容放入文本字​​段中进行编辑，但出现了错误。

问题：

我收到一条错误消息，提示 TypeError：无法读取未定义的属性“favorite_animal”

我的代码：

// import ...
// import ...

function getDataFromApi(id) {
  var url =
    "https://api.example.com/" + id;
  return fetch(url, {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  })
    .then((response) => response.json())
    .then((responseData) => {
      return responseData;
    })
    .catch((error) => console.warn(error));
}

function myFunction(props) {
  const [data, setData] = useState([]);
  useEffect(() => {
    getDataFromApi(props.id).then((response) => setData(response));
  }, []);

  return (
    <>
      <Form>
        <TextField>{data.details.favorite_animal}</TextField>
      </Form>
    </>
  );
}

export default myFunction;

有什么想法吗？