Javascript 有没有办法重新安排我的状态，以便我可以显示图像URL？

我有一个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])} />;

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
导出常量照片=（）=>{
const[image，setImage]=useState（[]）；
//后端API
常量proxyUrl=”http://localhost:3001";
const api=“/photo”；
界面图像{
src：字符串；
}
useffect（（）=>{
（异步函数callAPI（）{
axios
.get（proxyUrl+api）
。然后（（响应）=>{
setImage([
{
…响应。数据，
},
]);
})
.catch（（错误）=>console.log（错误））；
})();
}, []);
如果（image.length==0）返回加载图像。。。；
返回；

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

当我删除spread操作符时，会出现很多错误。我需要一种方法来检索照片URL，而不打断它，这样我就可以返回并查看它。可能是通过更改我定义接口的方式？或者通过不同的设置状态

---

首先修改您的useState，如下所示：

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

setImage(response.data)

并从get函数类型中删除图像

您的报税表：

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

返回；

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

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

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

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

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

  console.log("Image (state): ");
  console.log(image);

  if (!image) return <span>loading Image...</span>;

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

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
导出常量照片=（）=>{
const[image，setImage]=useState（“”）；
//后端API
常量proxyUrl=”http://localhost:3001";
const api=“/photo”；
useffect（（）=>{
（异步函数callAPI（）{
axios
.get（proxyUrl+api）
。然后（（响应）=>{
setImage（response.data）；
console.log（“RESPONSE.DATA”）；
console.log（response.data）；
})
.catch（（错误）=>console.log（错误））；
})();
}, []);
log（“映像（状态）：”；
console.log（图像）；
如果（！image）返回加载图像。。。；
返回；
};

为什么要将数组用于图像？理想情况下，我只需将其保存在字符串中，但由于我是通过Axios获取图像的，因此返回类型为AxiosResponse。无法找出如何简化操作。我可以查看您的响应吗？数据？请将其添加到您的问题响应中。没有扩展运算符的数据正是我需要的，它是URL对于图像-“HTTPS://…”问题是，当我删除spread运算符时，所有内容都会中断。我需要能够将response.data（一个包含URL的字符串）保存在state中。请尝试以下操作：setImage（response.data），我刚刚这样做了，两个不同的问题。第一个是关于state modification:类型为'never[]的参数“”不可分配给类型为“String |”（（）=>String）”的参数。类型“never[]”缺少类型“String”中的以下属性：charAt、charCodeAt、localeCompare、match等36个。ts（2345）秒：“Image”类型的参数不可分配给类型“SetStateAction”的参数。“Image”类型不可分配给类型（prevState:String）=>String。键入“Image”不提供与签名（prevState:String:String）匹配的字符串。ts（2345）