Question

遵循本教程使用fetch;我能够使用这个模拟API来提取照片：https://randomuser.me/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;

基本上，我正在试图弄清楚如何拉出更多的图片（来自API的其他数据）并且不确定我是否在正确的轨道上。目前，我正在尝试获得名字。我能得到一些帮助吗？

Answer 1

每个表达式都应该用{}括起来。

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

Answer 2

响应# load the necessary packages library(tidyverse) # create examples of my data set prob = tibble(names = letters[1:17]) sample1 = sample(letters, 5) # tidyverse approach, does not work pmap(sample1, function(x) prob == x) # basic R approach, does work lapply(sample1, function(x) prob == x) # how can I change the pmap code to make it work?是一个对象数组，其中每个对象都包含data.results属性。您需要更改渲染功能以显示名称

name

您用于存储结果的名称render() { return ( <div> { this.state.pictures.map(item =>( <div> <img src={item.picture.medium} /> <div>{item.name.first}</div> </div>)) } </div> ); }不合适，请注意命名部分。

希望这会有所帮助！

Answer 3

我不认为您使用的变量名称有意义，因为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;

有一个有效的例子here。

反应错误 - 无法读取未定义的属性“状态”

3 个答案: