如何在 react js 中刷新组件

Question

我使用 React js，文件中有一个名为 .我希望每次单击按钮时都会更新该值。App.jsPersonsPersonsimport 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

用于将数据传递到子组件的逻辑是错误的，您必须将其作为 propons 传递，而不是在 subComponent 中导入

此外，为了重新呈现每个请求，您必须使用useState hook，它返回您的Value数组及其setter方法

所以在应用程序功能内使用

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

然后在公理结果集中使用函数的人setPersons

并在你的coponent传递这个人作为道具。EleventHeaderCard

看到这支工作笔

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>

  );

}