Question

我有一个React组件（也使用TypeScript），可以将照片返回其父组件：

import React, { useEffect, useState } from "react";
import axios from "axios";

export const Photo = () => {
  const [image, setImage] = useState<Image[]>([]);

  // Backend API
  const proxyUrl = "http://localhost:3001";
  const api = "/photo";

  interface Image {
    src: string;
  }

  useEffect(() => {
    (async function callAPI() {
      axios
        .get<Image>(proxyUrl + api)
        .then((response) => {
          setImage([
            {
              ...response.data,
            },
          ]);
        })
        .catch((error) => console.log(error));
    })();
  }, []);

  if (image.length === 0) return <span>loading Image...</span>;

  return <img src={String(image[0])} />;

目标是从我的后端获取艺术家的个人资料图片。我可以将图片保存在状态中的唯一方法是使用散布运算符，当我这样做时，它会传播URL-将每个字母和每个字母作为值放置在对象中（请参见下面的屏幕截图）。

删除散布运算符时，会出现很多错误。我需要一种无需拆分即可检索照片URL的方法，以便我可以返回并查看它。也许通过更改我定义接口的方式？还是通过不同的状态设置？

Image of the URL being spread

Answer 1

首先像这样修改useState：

  const [image, setImage] = useState<String>([]);

并且获取了数据，您应该像这样设置setState：

setImage(response.data)

并从您的get函数类型中删除图片。

您的回报：

  return <img src={image)} />;

Answer 2

借助mortezashojaei的上述意见，我能够调整组件并最终使其能够按预期工作。如果有人感兴趣，请在此处添加代码。

有没有一种方法可以重新排列我的状态，以便可以显示图像URL？

2 个答案: