如何在 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: "michael.lawson@reqres.in",
    first_name: "Michael",
    last_name: "Lawson",
    avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg"
  },
  {
    id: 10,
    email: "lindsay.ferguson@reqres.in",
    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 的逻辑是错误的，您必须将其作为 props 传递而不是在 subComponent 中导入

另外，为了重新呈现每个请求，您必须使用 useState 挂钩，其中 returns 一个 yourValue 数组和它的 setter 方法

所以在app函数里面使用

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

然后在 axios 结果集中使用 setPersons 功能的人

并在您的 EleventHeaderCard 组件中将人物作为道具传递。

看到这个working pen

Answer 2

使用useState hook。它将根据更改重新呈现组件。

const initialValue = [
{
  id: 9,
  email: "michael.lawson@reqres.in",
  first_name: "Michael",
  last_name: "Lawson",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg"
},
{
  id: 10,
  email: "lindsay.ferguson@reqres.in",
  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>
  );
}

如何在 React JS 中刷新组件

how to refresh component in react js

javascript

setstate

reactjs

use-state