我尝试通过构造函数中的调用加载 JSON 数据，然后将该数据传递给一系列子元素。问题是，除了一个项目 ( picture.url ) 之外，所有数据似乎都加载了。所有其他信息都已正确加载和显示，但在尝试加载图片值时出现错误 - 它是一个嵌套的 JSON 对象，包含两个字段 comment 和 url 。

以下是正常 JSON 响应的示例：

{
  "id": 001,
  "name": "Harry",
  "online_status": "OFFLINE",
  "picture": {
      "comment": SOMECOMMENT,
       "url": SOMEURL
  },
  "last_login": SOMEDATEOBJECT,
}

以下是我的代码：

TilesContainer.js - 执行 fetch 调用的位置

class TilesContainer extends Component {

  constructor(props){
    super(props);
    this.state = { users: [], };
    this.getUsers = this.getUsers.bind(this);
    this.tiles = this.tiles.bind(this);
    this.getUsers("http://localhost:3000/api/search?length=32");
  }

  getUsers(usersLink) {
    fetch(usersLink)
    .then(response => response.json())
    .then(myJson => {
      let users = myJson.items;
      this.setState({
        users: users,
      })
    })
  }

tiles() {

    return (
      this.state.users.map(user => (
         <Tile key={user.id}  id={user.id} name={user.name} lastLogin={user.last_login} 
        onlineStatus={user.online_status} pictureLink={user.picture.url} />
      ))
    )
 }

  render(){
      return (
        <div id="tiles-container"
             className="tiles-container">
              {this.tiles()}
        </div>
      )
    }


}

export default TilesContainer

Tiles.js - 数据作为 props 传递的位置

class Tile extends Component {


  render() {

      let lastLoginDisplay = "";
      let lastLogin = Date.parse(this.props.lastLogin);
      let now = new Date();

      let timeDifferenceInMs = now.getTime() - lastLogin;
      let timeDifferenceInHours = Math.floor(timeDifferenceInMs / (1000 * 60 * 60));
      let timeDifferenceInDays = Math.floor(timeDifferenceInMs / (1000 * 60 * 60 * 24));

      if (this.props.onlineStatus === "OFFLINE") {
        if (timeDifferenceInHours <= 24 ) {
          if (timeDifferenceInHours === 1) {
            lastLoginDisplay = "Last seen " + timeDifferenceInHours.toString() + " hour ago";
          } else {
            lastLoginDisplay = "Last seen " + timeDifferenceInHours.toString() + " hours ago";
          }
        } else {
          if (timeDifferenceInDays === 1) {
            lastLoginDisplay = "Last seen " + timeDifferenceInDays.toString() + " day ago";
          } else {
            lastLoginDisplay = "Last seen " + timeDifferenceInDays.toString() + " days ago";
          }
        }
      } else {
        lastLoginDisplay = this.props.onlineStatus;
      }

       return (
         <div id={this.props.id} className='tile'>
             <h2>{this.props.name}</h2>
             <img src={this.props.pictureLink} alt={"userPic"}/>
             <h3><span>{lastLoginDisplay}</span></h3>
         </div>
       )
     }

}

export default Tile

以下是加载失败时收到的错误消息的屏幕截图：

当然，当我尝试将整个用户对象作为一个 prop 传递，然后 console.logging url 时，我能够做到！它会输出整个 URL 列表，然后会产生相同的错误……不确定这是否与我尝试加载数据的方式有关（即问题是异步的）。就像我说的，所有其他数据字段都加载并成功作为 props 传递，只有图片字段会造成这个问题。谢谢。

编辑：调试器的输出显示用户数据数组中的一项缺少 picture 字段，因此它未定义。