如何在react js中刷新组件
如何在react js中刷新组件
提问于 2020-05-16 18:00:41
我使用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
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-16 18:22:14
用于将数据传递到subComponent的逻辑是错误的，您必须在subComponent中将其作为props而不是import传递
此外，为了重新呈现每个请求，您必须使用setter挂钩，它返回一个yourValue数组及其useState方法
所以在app函数内部使用
let [persons, setPersons] = useState(initialData);然后在axios结果集中使用setPersons函数的人员
在你的EleventHeaderCard组件中传递这个人作为道具。
查看此working pen
Stack Overflow用户
发布于 2020-05-16 18:23:37
使用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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61835015
复制相关文章
相似问题
腾讯云开发者
