React：如何在我的 JSX 中使用 API 调用的结果？（范围问题）

Question

我正在尝试使用我的 API 调用（响应）的结果在我的 JSX 中的 src 级别显示它。

但由于范围的原因，我无法访问“响应”。在我的 useEffect 中分配它之前，我尝试在全局范围内将 response 声明为空变量，但它不起作用。

useEffect(() => {
    const toFetchProfilPicture = async () => {
      try {       
        const response = await axios.get(
        `http://localhost:4200/api/user/image/${JSON.parse(localStorage.getItem("user")).user_id}`
          );
      } catch (err) {
        throw err;
      }
    };
    toFetchProfilPicture();
  }, []);


  return (
    <div className="modal">
      <form className="modal__infos" onSubmit={saveChange}>
        <div className="modal__photo"> 
          <img src={response.data[0]} alt="profile_picture" />
        </div>
      </form>
    </div>
  );
};

我无法使用函数在全局范围内进行“响应”，但我想做其他事情。

如何在我的 JSX 中使用“响应”？

Answer 1

您应该使用包含字符串的状态变量（图像 URL）：

const [imgSrc, setImgSrc] = useState('');

useEffect(() => {
    const toFetchProfilPicture = async () => {
      try {       
        const { data } = await axios.get(
        `http://localhost:4200/api/user/image/${JSON.parse(localStorage.getItem("user")).user_id}`
          );

          setImgSrc(data[0])
      } catch (err) {
        throw err;
      }
    };
    toFetchProfilPicture();
  }, []);


  return (
    <div className="modal">
      <form className="modal__infos" onSubmit={saveChange}>
        <div className="modal__photo"> 
          <img src={imgSrc} alt="profile_picture" />
        </div>
      </form>
    </div>
  );
};

React：如何在我的 JSX 中使用 API 调用的结果？（范围问题）

React : How to use the result of an API call, in my JSX? (scope problem)

reactjs

use-effect

React：如何在我的 JSX 中使用 API 调用的结果？ （范围问题）

React : How to use the result of an API call, in my JSX? (scope problem)

reactjs

use-effect

React：如何在我的 JSX 中使用 API 调用的结果？（范围问题）