API 图片未渲染

Question

我正在尝试显示来自 API 的图像，但图像不显示。我尝试了所有可能的方法，但都失败了。我没有收到任何错误，但图像在渲染时会随时中断。这是我的代码：

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(JSON.stringify(personData.results[0].picture.large));
    });
  }, []);
  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
          console.log(value);
        }}
      >
        Next
      </button>
      <pre>
        <img src={personData} alt='Person' />
        <br />
        {personData}
      </pre>
    </div>
  );
}

export default LoadCountries;

Answer 1

现在可以了。我所做的只是删除了 JSON.stringify()。以下是更正：

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);
    });
  }, []);
  return (
    <div>
      <button
        onClick={() => {
          setValue(value + 1);
          console.log(value);
        }}
      >
        Next
      </button>
      <pre>
        <img src={personData} alt='Person' />
        <br />
        {personData}
      </pre>
    </div>
  );
}

export default LoadCountries;

API 图片未渲染

API image not rendering

javascript

api

render

reactjs

axios