如何在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: "[email protected]",
    first_name: "Michael",
    last_name: "Lawson",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg"
  },
  {
    id: 10,
    email: "[email protected]",
    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>
  );
}

在这里您可以看到我的codesandbox

Answer 1

用于将数据传递到subComponent的逻辑是错误的，您必须将其作为道具传递，而不是在subComponent内部导入

为了重新呈现每个请求，您还必须使用useState钩子，该钩子返回yourValue的数组及其setter方法。>

因此可在应用程序函数内部使用

let [persons, setPersons] = useState(initialData);
然后在axios结果集中，使用setPersons函数的人

并且在您的EleventHeaderCard伙伴中将人作为道具传递。

请参阅此working pen

Answer 2

使用useState hook。更改后将重新呈现组件。