Question

嘿伙计们，我设法从json获取我的星球大战api数据，以显示在我的应用上。我通过将状态设置为people.name获得了名称对象，但是当我将其设置为“人员”时它呈现包括我不想使用的数据在内的所有内容。

class Card extends Component {
  constructor(){
    super()
    this.state = {
  jedi: [],
   searchfield: ''
}
    }

        componentDidMount(){
         fetch('https://swapi.co/api/people/1')
      .then(response => { return response.json()})
       .then(people => this.setState({jedi: JSON.stringify(people)}))
        }

    render(){
      return (
           <div className = 'charcards'>
             <div>
             <img className= 'pic' alt = 'Luke Skywalker' src = {luke} />
                </div>
                <hr/>
         <h2  className = "name1"> Name: {this.state.jedi.name}</h2>
         <h2 className = 'height'> {this.state.jedi.height}</h2>
          </div>
      );
    }

  }

如果我将.then(people => this.setState({jedi: JSON.stringify(people)}))更改为

，我似乎能够获得名称

.then(people => this.setState({jedi: JSON.stringify(people.name)}))

但是我无法调用我的其他数据，如身高，质量等。当我打电话给别人时，它会调用大量不必要的数据。我应该遍历api并选择我想要的数据，但是我将如何接近它，因为我尝试循环但不能渲染数据。致电this.state.jedi.name或this.state.jedi.height并不起作用，因为它只是调用所有内容

Answer 1

我认为问题在于这一行：

.then(people => this.setState({jedi: JSON.stringify(people)})

您在响应对象上调用JSON.stringify()，将其序列化为字符串。如果您希望能够访问响应JSON的属性，可以将其删除以获取：

.then(people => this.setState({jedi: people})

此外，您的this.state.jedi州似乎是一个数组，因此在检索this.state.jedi和name属性与执行{{height时，请确保迭代每个this.state.jedi.<name | height> 1}}。

Answer 2

在API支持之前，您无法获取部分数据。 Insted你总是可以只使用你想要的东西。找到有用的来源.....

    class Card extends Component {
      constructor(){
        super()
        this.state = {
      jediBio: {},
       searchfield: ''
    }
        }

            componentDidMount(){
             fetch('https://swapi.co/api/people/1')
          .then(response => { return response.json()})
           .then(people => this.setState({jediBio: people}))
            }

        render(){
//Define luke here else will throw luke as undefined
Let luke = "http://media.comicbook.com/2017/03/star-wars-luke-skywalker-239385.png";
          return (
               <div className = 'charcards'>
                 <div>
                 <img className= 'pic' alt = 'Luke Skywalker' src = {luke} />
                    </div>
                    <hr/>
             <h2  className = "name1"> Name: {this.state.jediBio.name}</h2>
             <h2 className = 'height'> {this.state.jediBio.height}</h2>
              </div>
          );
        }
     }

我怎么不一次抓取所有api数据

2 个答案: