React 循环遍历数组并渲染

Question

我正在尝试显示这两个数组。每次单击该按钮时，都会生成一个新用户并将其添加到数组中。我想让它渲染整个数组，而不仅仅是最新的行。我已经尝试了很多东西。我一直在网上看到有关地图的信息，但我无法让其中任何一项正常工作。

import React from "react";
import ReactDOM from "react-dom";
import $ from "jquery";

var personlist = [];
var imglist = [];
var i = 0;

class People extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "firstlastname",
      image: "image"
    };
  }

  static getDerivedStateFromProps(props, state) {
    getUser = () => {
      var usersname;
      var thumbnail;

      $.ajax({
        url: "https://randomuser.me/api/?inc=name,picture",
        data: "json",
        async: false,
        success: function (data) {
          usersname = JSON.stringify(
            data.results[0].name.first + " " + data.results[0].name.last
          );

          thumbnail = JSON.stringify(data.results[0].picture.thumbnail);

          newUser = usersname;
          newImage = thumbnail;

          var eventstring = new String(); //remove quotes from image string
          eventstring = newImage.toString().replace(/"/g, ""); //remove quotes from image string

          personlist.push([newUser, eventstring]);
          imglist.push([eventstring]);
          console.log(personlist);
        },

        error: function (errormsg) {
          console.log(errormsg);
        }
      });
    };

    this.getUser();

    var eventstring = new String(); //remove quotes from image string
    eventstring = newImage.toString().replace(/"/g, ""); //remove quotes from image string

    return { name: newUser, image: eventstring };
  }

  changeColor = () => {
    //change state to rerender
    this.setState({ name: "updt" });
    i++;
    return { name: "updt" };
  };

  render() {
    return (
      <div>
        <button onClick={this.changeColor}>Generate New Person</button>

        <div>
          
          <h1>{personlist[i][0]}</h1>
          <img src={personlist[i][1]} alt="none" />
        </div>
      </div>
    );
  }
}

export default People;

Answer 1

React 组件可以将数据存储在其状态变量和类中，您可以使用this.state 访问状态，如果您想修改状态，可以使用this.setState 函数。您可以在 react 网站上阅读更多内容。

下面是您提供的重构代码，我在该状态中初始化了people 数组。而在fetchPerson方法中，你可以看到获取数据后，它调用this.setState方法来更新当前状态，这会导致组件重新渲染。我已将 changeColor 方法替换为 onGetNewPerson，您用于渲染组件以获取新人。在渲染方法中，您可以看到我正在使用数组可用的 map 函数，您可以在 Mozilla Javascript 文档中阅读更多相关信息。如果您不了解类，可以查看功能组件。

class People extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "firstlastname",
      image: "image",
      people: [],
    };

    this.onGetNewPerson = this.onGetNewPerson.bind(this);
  }

  componentDidMount() {
    this.fetchPerson();
  }

  fetchPerson() {
    $.ajax({
      url: "https://randomuser.me/api/?inc=name,picture",
      data: "json",
      async: false,
      success: function (data) {
        // if you want to replace the people array in the state
        // this.setState({ people: data.results });

        // if you want to append to the people array
        this.setState((prevState) => {
          return {
            people: prevState.people.concat(data.results)
          };
        });
      }
    });
  }

  parsePerson(person) {
    const name = JSON.stringify(
      person.name.first + " " + person.name.last
    );
    const image = JSON.stringify(person.picture.thumbnail).toString().replace(/"/g, "");

    return { name, image };
  }

  onGetNewPerson = () => {
    // on click => fetch and append new person
    this.fetchPerson();
  };

  render() {
    return (
      <div>
        <button onClick={this.onGetNewPerson}>Generate New Person</button>

        <div>
          {this.state.people.map((person, i) => {
            const p = this.parsePerson(person);
            return (
              <div key={"person-" + i}>
                <h1>{p.name}</h1>
                <img src={p.image} alt="none" />
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}