0

我的模型如下所示：

coverPhoto: {
  type: String,
  required: true,
},
images: [{ 
  type: String 
}],
location: {
  address: { type: String, required: true },
  city: { type: String, required: true },
  postalCode: { type: Number, required: true },
  country: { type: String, required: true }
},

我播种了一些数据，它在数据库中正确显示为：

"coverPhoto": "/images/SUSI.jpg",
"images": [
    "/images/SUSI1.jpg",
    "/images/SUSI2.jpg",
    "/images/SUSI3.jpg"
],
"location": {
    "address": "AM PICHELSSEE",
    "city": "BERLIN",
    "postalCode": 13595,
    "country": "Germany"
},

现在尝试在前端访问它：

      <Col>
        <Image src={renting.coverPhoto} alt={renting.name} fluid />
      </Col>
      <Col>
        <Image src={renting.images[0]} alt={renting.name} fluid />
      </Col>

我添加了coverPhoto 以供参考，因为一切正常。但是当我尝试访问 images[0], 1 ,[2] 时，我收到此错误：

编辑：我为上面的输入显示了错误的错误。

错误是：无法读取未定义的属性 0。

当我尝试访问 {renting.location.address} 时，我收到与“无法读取未定义的属性“地址”相同的错误”

当我在rentingActions 中控制台登录时，一切都很好。当我 console.log(data) 时，我得到了正确的输出。

console.log(data.images[0]) ==> /images/SUSI1.jpg console.log(data.location.address) ==> AM PICHELSSEE

所以我想我的问题是，为什么我不能访问嵌套对象？是语法错误吗？链接到我的 代码框

4

3 回答 3

0

问题来自我的减速器：

当我尝试访问 {renting.location} 时，我收到错误消息“对象作为 React 子项无效。如果您要渲染一组子项，请改用数组”。所以我意识到错误来自我的减速器：

旧版 ：

export const rentingDetailsReducer = (state = { renting: {} }, action) => {

switch (action.type) {
case RENTING_DETAILS_REQUEST:
  return { loading: true, ...state } 
case RENTING_DETAILS_SUCCESS:
  return { loading: false, renting: action.payload }
case RENTING_DETAILS_FAIL:
  return { loading: false, error: action.payload }
default:
  return state }}

我必须在状态下指定“位置”是一个对象，而“图像”是一个数组。解决方案 ：

export const rentingDetailsReducer = (state = { renting: { location: {}, images: [] } }, action) => {

switch (action.type) {
case RENTING_DETAILS_REQUEST:
  return { loading: true, ...state } 
case RENTING_DETAILS_SUCCESS:
  return { loading: false, renting: action.payload }
case RENTING_DETAILS_FAIL:
  return { loading: false, error: action.payload }
default:
  return state }}
于 2021-01-08T19:11:45.163 回答
0

如果您的前端获取数据，请尝试使用这样的完整网址访问它


const image1=`http://yourhostname/yourImageFolder/{renting.images[0]}`;
//or 
const image1=`http://yourhostname:yourPort/yourImageFolder/{renting.images[0]}`;

//or identify the image folder locally then make the url
const image1 = `../imageFolder/{renting.images[0]}`;

然后你可以把src你需要的地方，src={image1}

于 2021-01-08T01:56:07.997 回答
0

我不知道您将图片网址放在哪里以及如何获得它，但是如果您使用下面的代码，我认为它会解决您的问题

import React, { useEffect, useState } from "react";
import Axios from "axios";
import "./styles.css";

export default function App() {
  const [imgList, setImgList] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await Axios.get(
        "https://jsonplaceholder.typicode.com/photos"
      );
      if (response.status === 200) {
        setImgList(response.data);
      }
    }
    fetchData();
  }, []);
  return (
    <div className="App">
      {imgList
        ? imgList.map((e) => {
            return <img src={e.url} alt={e.title} />;
          })
        : ""}
    </div>
  );
}

说明：声明了一个 imgList 状态并用空数组初始化。在 useEffect 挂钩内我定义了一个异步函数 fetchData，因为 useEffect 挂钩是同步的，并且在 fetchData 函数内我发出 axios 请求。如果响应正常，则使用响应更新 imgList 状态data.Inside app 函数返回如果 imgList 不为空，我会映射 imgList url。

CodeSandBox 链接

于 2021-01-08T03:24:47.647 回答