单击按钮时显示来自 API 的数据。使用 ReactJS

4回答

慕哥9229398

如果我错了请纠正我您看到这种情况的最可能原因是 JavaScript 内部的工作方式。语法：function xyz() {}有一个隐含的this也许尝试更改您的代码：function onButtonClickHandler(state) { console.log(state.person);};到：const onButtonClickHandler = () => { console.log(this.state.person);};

0 0

MMTTMM

您已将函数定义onButtonClickHandler为接受一个参数的函数，并记录person该参数的属性。函数中的参数与组件的参数state无关。state 在 JavaScript 中，它们是两个完全不相关的变量，只是碰巧具有相同的名称。function onButtonClickHandler(state) { console.log(state.person);};当button调用时onClick，它将事件作为参数传递。所以你onButtonClickHandler正在记录person事件的属性，这显然不存在。由于您没有使用事件中的任何信息，因此您的函数不应采用任何参数。正如其他人所说，您还应该将此函数移到方法之外render()，以便不会在每次渲染时重新创建它。bind如果您使用箭头函数，则不需要使用建议，因为它们会自动绑定。export default class FetchActors extends React.Component { /*...*/ onButtonClickHandler = () => { console.log(this.state.person); };}里面render()<button onClick={this.onButtonClickHandler}>Enter</button>您还可以将函数内联定义为不带参数的箭头函数：<button onClick={() => console.log(this.state.person)}>Enter</button>如果您是 React 新手，我建议您学习函数组件而不是类组件。我试图在单击“信息”按钮时显示每个字符的数据。一旦我们调用 API，我们就已经加载了每个角色的信息。我们只需要知道要显示哪一个即可。expanded您可以向您添加一个属性，并使用它来存储当前扩展项目的state索引（或id或，无论您真正想要什么）。name当我们循环显示名称和信息按钮时，我们检查该字符是否是展开的字符。如果是这样，我们将显示角色信息。现在onClick按钮的处理程序负责设置state.expanded我们单击它的角色。{this.state.person.map((person, i) =>(<div> <div> {person.name} <button onClick={() => this.setState({expanded: i})}>Info</button> {this.state.expanded === i && ( <CharacterInfo key={person.name} person={person} /> )} </div>

0 0

料青山看我应如是

有几种方法可以解决您的问题；我会给你更常见的方法。您希望将单击处理程序定义为类（实例）方法，而不是将其声明为渲染方法内的函数（您可以将其定义为渲染方法内的函数，但这可能不是最好的方法超出范围的各种原因）。您还必须将其“this”值绑定到类（实例），因为单击处理程序是异步触发的。最后，添加一个按钮并在单击时触发获取：class Actors extends React.Component {  state = {    loading: false,    actors: undefined,  };  constructor(props) {    super(props);    this.fetchActors = this.fetchActors.bind(this);  }  async fetchActors() {    this.setState({ loading: true });    const url = "https://swapi.dev/api/people/";    const response = await fetch(url);    const data = await response.json();    this.setState({ actors: data.results, loading: false });  }  render() {    console.log('Actors: ', this.state.actors);    return <button onClick={this.fetchActors}>fetch actors</button>;  }}

0 0

千万里不及你

有时我需要反应一分钟来加载更新的状态。import React from "react";export default class FetchActors extends React.Component {  state = {    loading: true,    person: null  };  async componentDidMount() {    const url = "https://swapi.dev/api/people/";    const response = await fetch(url);    const data = await response.json();    if(!data.results) { // throw error }    this.setState({ person: data.results, loading: false }, () => {  console.log(this.state.person) // log out your data to verify});  }  render() {    if (this.state.loading || !this.state.person) { // wait for person data      return <div>loading...</div>;    }else{   function onButtonClickHandler(state) { // just make a componentDidUpdate function      console.log(state.person);    };    return (      <div>        <h1>Actors</h1>        {this.state.person.map(person =>(        <div>          <div>            {person.name}            <button onClick={onButtonClickHandler}>Info</button>          </div>        </div>        ))}        <button onClick={onButtonClickHandler}>Enter</button>      </div>    );  }}}

0 0