开发者问题收集

显示带有ReactJ中API路径的图像

2021-08-16
713

我从 API 获取数据,我想通过 API 提供给我的路径显示图片

我有这个简单的代码来获取一个随机演员, 并且我把他的所有信息保存为 json,例如以下数据: profile_path: "/j2Yahha9C0zN5DRaTDzYA7WtdOT.jpg"

我如何使用此路径通过 <img src="??”/>


function Game() {
  const [page, setPage] = useState(1);
  const [apiResponse, setApiResponse] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const API_KEY_MOVIE_DB = 'xxxxxxxxxxxxxxxxx';

  useEffect(() => {
    const myInit = {
        method: "GET",
        mode: "cors",
      };
      const random_0_20 = parseInt(Math.random() * (200 - 1) + 1);
      const actor = fetch(`https://api.themoviedb.org/3/person/${random_0_20}?api_key=${API_KEY_MOVIE_DB}`, myInit)
      .then(res => res.json())
      .then(response => {
        setApiResponse(JSON.stringify(response));
        setIsLoading(false);
        localStorage.setItem(`${random_0_20}`, JSON.stringify(response))
      })
      .catch(error => console.log(error));
    }, [page]);

  return (
    <div>
        {isLoading && <p>Loading</p>}
        {apiResponse}
        <img src={apiResponse.profile_path}></img>
    </div>
  );
} ```
显示图片
1个回答

您正在将状态设置为 字符串

setApiResponse(JSON.stringify(response))

并且字符串没有名为 profile_path 的属性:

<img src={apiResponse.profile_path}></img>

如果 API 的结果是一个对象,则只需将状态设置为该对象:

setApiResponse(response)

您还应该将状态初始化为对象,而不是数组:

const [apiResponse, setApiResponse] = useState({});

甚至可能将属性设置为默认值,以避免在标记中呈现“未定义”:

const [apiResponse, setApiResponse] = useState({ profile_path: '' });

字符串、对象和数组都是非常不同的东西。保持变量类型一致,以便代码的行为保持一致。

David
2021-08-16