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

Question

我试图在单击&ldquo;信息&rdquo;按钮时显示每个字符的数据。我知道这是因为在onButtonClickHandler函数中它看不到状态。我也尝试过，this.state.person但它给了我一个错误，说&ldquo;无法读取状态&rdquo;。如果我尝试，state.person它会给我&ldquo;未定义&rdquo;。最好的方法是什么？谢谢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();    this.setState({ person: data.results, loading: false });  }  render() {    if (this.state.loading) {      return <div>loading...</div>;    }    if (!this.state.person.length) {      return <div>didn't get a person</div>;    }   function onButtonClickHandler(state) {      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>    );  }}

Answer 1

如果我错了请纠正我

您看到这种情况的最可能原因是 JavaScript 内部的工作方式。语法：

function xyz() {

}

有一个隐含的this

也许尝试更改您的代码：

function onButtonClickHandler(state) {

  console.log(state.person);

};

到：

const onButtonClickHandler = () => {

  console.log(this.state.person);

};

Answer 2

您已将函数定义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>

Answer 3

有几种方法可以解决您的问题；我会给你更常见的方法。

1. 您希望将单击处理程序定义为类（实例）方法，而不是将其声明为渲染方法内的函数（您可以将其定义为渲染方法内的函数，但这可能不是最好的方法超出范围的各种原因）。

2. 您还必须将其“this”值绑定到类（实例），因为单击处理程序是异步触发的。

3. 最后，添加一个按钮并在单击时触发获取：

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>;

  }

}

Answer 4

有时我需要反应一分钟来加载更新的状态。

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>

    );

  }

}}