как обновить компонент в React JS

Question

Я использую React js, есть переменная в App.js файл называется Persons. Я хочуPersons значение будет обновляться каждый раз, когда я нажимаю на кнопку.

import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import EleventHeaderCard from "./ElevatedHeaderCard";
import axios from "axios";

export let persons = [
  {
    id: 9,
    email: "[e-mail]",
    first_name: "Michael",
    last_name: "Lawson",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg"
  },
  {
    id: 10,
    email: "[e-mail]",
    first_name: "Lindsay",
    last_name: "Ferguson",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg"
  }
];

const handleClick = () => {
  return axios.get(`https://reqres.in/api/users?page=2`).then(res => {
    persons = res.data.data;
    console.log(persons);
  });
};

export default function App() {
  return (
    <div className="App">
      <Button color="primary" type="Submit" onClick={handleClick}>
        click me !!!
      </Button>
      <EleventHeaderCard />
    </div>
  );
}

Здесь вы можете увидеть мои коды

Answer 1

Логика, используемая для передачи данных в подкомпонент, неверна, вы должны передать ее как реквизиты вместо импорта внутри подкомпонента

Также для повторной визуализации каждого запроса вы должны использовать хук useState, который возвращает массив yourValue и его метод установки

так что используйте внутри функции приложения

let [persons, setPersons] = useState(initialData);

а затем в результате axios установить людей, использующих setPersons функция

и в вашем EleventHeaderCard coponent передать человека как подпорку.

увидеть эту рабочую ручку

Answer 2

Используйте хук useState. Он будет повторно отображать компонент при изменении.

const initialValue = [
{
  id: 9,
  email: "[e-mail]",
  first_name: "Michael",
  last_name: "Lawson",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg"
},
{
  id: 10,
  email: "[e-mail]",
  first_name: "Lindsay",
  last_name: "Ferguson",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg"
}
];

export default function App() {
  const [people, setPeople] = useState(initialValue);

  const handleClick = () => {
    return axios.get(`https://reqres.in/api/users?page=2`).then(res => {
      setPeople(res.data.data);
    });
  };

  return (
    <div className="App">
      <Button color="primary" type="Submit" onClick={handleClick}>
      click me !!!
    </Button>
    <EleventHeaderCard />
  </div>
  );
}