Question

我只是关于reactjs的新开发者

我正在尝试映射数据。我正在关注reactjs教程，这是我的结果，但是我尝试再试一次是行不通的。我该如何解决？

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }
  componentDidMount() {
 // API from reqres
    fetch("https://reqres.in/api/users/2")
      .then(res => res.json())
      .then(
        (result) => {
          console.log(result.data);
          this.setState({
            isLoaded: true,
            items: result.data
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }
  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
//this is the problem
          {items.map(item=> { 
            return <div>
              <p>{item.id}</p>
            </div>
          })}
        </div>
      );
    }
  }
}

export default App;

请帮助我，我只想查看我的数据：（

将fetch更改为Axios之后，我遇到了同样的问题？

    Axios({
      method:"GET",
      url:"https://reqres.in/api/users"
    }).then(res => {
      this.setState({
         isLoaded:true,
           items: res.data
      })
      console.log(res.data)

  }).catch(err => {
      console.log(err)

  })

Answer 1

您可以通过为项目指定默认值来解决此问题：

const { error, isLoaded, items = [] } = this.state;

Answer 2

从"https://reqres.in/api/users"获取数据并使用该数据，因为/ users返回用户数组，/ users / 2返回userId = 2的用户对象。

Answer 3

https://reqres.in/api/users/2

这是来自服务器的响应数据

{
  "data": {
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
  }
}

如果可以更改服务器，则将数据结果更改为数组。会很好的。

{
  "data": [{
    "id": 2,
    "first_name": "Janet",
    "last_name": "Weaver",
    "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
  }]
}

但是您不能更改响应数据，不能与.map

一起使用

render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
//just use for one(object)
            <div>
              <p>{item.id}</p>
            </div>
        </div>
      );
    }
  }

如何修复Reactjs中的“ items.map未定义”错误

3 个答案: