Reactjs TypeError:无法读取属性'；url'；loadImage处未定义的

在尝试从monogo atlas映射和数组URL字符串时出错，这些URL来自google firebase，我在atlas中手动创建了一个集合，并将URL粘贴为字符串。我注释掉了map函数，以查看这是否是导致URL未定义的原因，而事实并非如此。为了以嵌套数据中的属性为目标，我使用了“res.data.data.url”，它应该可以工作，但不能。我在下面的控制台上看到了这个阵列的屏幕截图。奇怪的是，在数据作为数据对象嵌套在另一个数据对象中，URL嵌套在该对象中之前，现在我只看到数组对象

为了在控制台中获取数组，我做了res.data。然后我尝试通过“res.url”和“res.data.url”以及“url”来获取url，但没有任何url是未定义的

我在express node中测试了控制器，并对响应进行了处理，然后完整地返回了我的阵列，我在终端中只得到了304状态，因此我的理论是react中的问题在前端

有人能帮我解决这个错误吗？这就是为什么我不能看到我的图像吗

这是密码

const Gallery=（）=>{
const[url，setUrl]=useState（[]）；
const history=useHistory（）；
const loadImage=async（）=>{
试一试{
让res=等待axios
.get（“http://localhost:5000/geturls");
//console.log（res.data）
setUrl（res.data.data.url）；
}捕获（错误）{
console.log（错误）；
}
};
useffect（（）=>{
//用于检查登录令牌的函数
loadImage（）；
});
// },[]);
返回(
分享诗
画廊
{url.map（（url）=>(
))}
);
};
导出默认库基于您的console.log屏幕截图axios响应数据是一个对象数组，因此要仅拥有一个url数组，您需要将其映射如下：

 const loadImage = async () => {
    try {
      let res = await axios
      .get("/data.json");
      console.log(res.data)
      setUrl(res.data.map(d=>d.url));
    } catch (error) {
      console.log(error);
    }
  };

如果只需要在渲染过程中获取数据，请使用空数组以使用效果依赖项：

  useEffect(() => {
  // function to check login token
    loadImage();

  },[]);

在返回中，我将更改名为variable的url，以避免与您的列表混淆，例如：

 {url.map((urlData) => (
            <Image alt="" className="img-fluid" src={urlData} thumbnail  />
              ))}

const Gallery = () => {

  const [data, setData] = useState([]);


  const loadImage = async () => {
    try {
      let res = await axios
      .get("/data.json");
      console.log(res.data)
      setData(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
  // function to check login token
    loadImage();

  },[]);

    return (
    <div className="postverse">
      <Container className="mt-5 ml-auto mr-auto">
        <div className="mb-4 mt-4">
          <Navi />
        </div>
        <h1 className="text-center">
          ShareVerse
          <span className="text-success"> Gallery</span>
        </h1>
        <Row className="d-flex align-items-center justify-content-center">
          <Col className="mb-2" xs="12" lg="3">
            <Nav.Link href="/waterfall">
              {data.map((image) => (
                <Image key={image._id} alt={image.name} className="img-fluid" src={image.url} thumbnail  />
              ))}
            </Nav.Link>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default Gallery;

你能告诉我们从axios返回的响应结构吗？