Javascript 反应错误-无法读取属性'；州'；未定义的

我将学习使用fetch的本教程；我能够使用这个模拟API提取照片：……但是修改了代码，从API中提取其他数据，例如名字。但是，在过程中遇到错误：

代码如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
      pictures: [],
      people: [],
    };
  }

  componentWillMount()
  {
    fetch('https://randomuser.me/api/?results=10')
    .then(results => results.json())
    .then(data => this.setState({ pictures: data.results }))
    .then(data => this.setState({ people: data.results }));
  }



    render()  {
      console.log(this.state);
      return (
        <div>
            {
              this.state.pictures.map( pic =>(<div><img src={pic.picture.medium} /></div>) ).
              this.state.people.map(person => (<div>{person.name.first}</div>))
            }    
        </div>
      );
    }
  }

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
图片：[]，
人员：[]，
};
}
组件willmount（）
{
取（'https://randomuser.me/api/?results=10')
.then（results=>results.json（））
.then（data=>this.setState（{pictures:data.results}））
.then（data=>this.setState（{people:data.results}））；
}
render（）{
console.log（this.state）；
返回(
{
this.state.pictures.map（pic=>（））。
this.state.people.map（person=>（{person.name.first}））
}    
);
}
}
导出默认应用程序；

---

基本上，我试图找出如何提取更多的图片（API中的其他数据），但不确定我是否走上了正确的轨道。目前，我正试图得到第一个名字。我能得到一些帮助吗？

每个表达式都应该用

{}

括起来

{this.state.pictures.map(pic => (
  <div>
    <img src={pic.picture.medium} />
  </div>
))}
{this.state.people.map(person => <div>{person.name.first}</div>)}

{this.state.pictures.map（pic=>(
))}
{this.state.people.map（person=>{person.name.first}}

响应

数据。结果

是一个对象数组，其中每个对象都包含

名称

属性。您需要更改渲染函数以显示名称

render()  {
  return (
    <div>
        {
          this.state.pictures.map(item =>(
          <div>
            <img src={item.picture.medium} />
            <div>{item.name.first}</div>
          </div>))
        }    
    </div>
  );
}

render（）{
返回(
{
this.state.pictures.map（项=>(
{item.name.first}
))
}    
);
}

用于存储结果的名称

图片

不合适，请注意命名部分

---

希望这会有帮助

我认为您使用的变量名没有意义，因为API响应中没有任何名为

pictures

或

people

的内容

您要做的是将数据设置为状态，然后在其上循环

简而言之，你会有这样的东西：

class App extends Component {
  state = { data: [] }

  componentWillMount() {
    fetch('https://randomuser.me/api/?results=10')
      .then(results => results.json())
      .then(data => this.setState({ data: data.results }))
  }

  render() {
    if (!this.state.data) {
      return 'loading'
    }
    console.log(this.state.data)
    return (
      <div>
        {
          this.state.data.map(item => (
            <div>
              <img src={item.picture.medium} />
              <p>{item.name.first}</p>
            </div>
          ))
        }
      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
状态={data:[]}
组件willmount（）{
取（'https://randomuser.me/api/?results=10')
.then（results=>results.json（））
.then（data=>this.setState（{data:data.results}））
}
render（）{
如果（！this.state.data）{
返回“加载”
}
console.log（this.state.data）
返回(
{
this.state.data.map（项=>(
{item.name.first}

))
}
);
}
}
导出默认应用程序；

有一个有效的例子