类型错误：无法读取 loadImage 处未定义的属性“url”

Question

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

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

我在 express 节点中测试了控制器并安慰了响应并完整地取回了我的数组，我只是在终端中获得了 304 状态，所以我的理论是问题出在前端的反应中。

任何人都可以帮助我解决未定义的错误，这就是我看不到图像的原因吗？

这是代码

const Gallery = () => {

  const [url, setUrl] = useState([]);
  const history = useHistory();

  const loadImage = async () => {
    try {
      let res = await axios
      .get("http://localhost:5000/geturls");
     // console.log(res.data)
      setUrl(res.data.data.url);
    } 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">
              {url.map((url) => (
                <Image alt="" className="img-fluid" src={`${url}`} thumbnail  />
              ))}
            </Nav.Link>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default Gallery;

Answer 1

根据您的 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 依赖：

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

  },[]);

在返回时，我会更改 url 命名变量以避免与您的列表混淆，例如：

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

你不需要使用 ${url} 你可以直接传递 urlData 因为它是字符串类型
更新
如果您需要建议，我会保留 res.data 中的 Object 数组，因为您需要将密钥传递给 <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;