React使用Axios调用randomuser.me API获取图片渲染失败问题咨询

问题原因 #

你对接口返回的图片URL调用了JSON.stringify()，该方法会给原始字符串额外包裹一层双引号，导致最终传入<img>标签src属性的地址是错误格式：比如原始URL是https://randomuser.me/api/portraits/women/1.jpg，经过处理后会变成"https://randomuser.me/api/portraits/women/1.jpg"，浏览器会把引号也识别为URL的一部分，自然无法加载资源。

修复方案 #

• 直接移除JSON.stringify包裹，将原始图片URL存入状态即可
• 如果需要实现点击Next按钮切换用户的效果，把value加入useEffect的依赖项，每次value变更时重新拉取接口数据

修复后完整代码 #

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

function LoadCountries() {
  const [personData, setPersonData] = useState('');
  const [value, setValue] = useState(1);

  const fetchData = async () => {
    return Axios.get(`https://randomuser.me/api`)
      .then(({ data }) => {
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  };
  useEffect(() => {
    fetchData().then((personData) => {
      setPersonData(personData.results[0].picture.large);
    });
  }, [value]);

  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
        }}
      >
        Next
      </button>
      <div>
        <img src={personData} alt='Person' />
        <br />
        {personData}
      </div>
    </div>
  );
}

export default LoadCountries;

内容的提问来源于stack exchange，提问作者Abubakar Oluyinka