[英]ReactJS How to call a function to change JSON dict value after setState?
Let us say I currently have a ReactJS file where the code is like so:假设我目前有一个 ReactJS 文件,其中代码如下:
class myFunction extends React.Component {
constructor(props) {
super(props);
this.state = {
data: {}
}
}
componentDidMount() {
fetch('/api/data').then(r => r.json()).then(data => {
this.setState({data: JSON_data})
}
render() {
return(
<h1>Name: {data.name}</h1>
<p>Birthday:{data.birthday} </p>
)
}
}
export default myFunction;
Inside my data variable, it will be a library with two key/values (1 for name and 1 for birthday).在我的数据变量中,它将是一个具有两个键/值的库(1 代表姓名,1 代表生日)。 So an example might be:
所以一个例子可能是:
data = {
"name": "Julia"
"birthday": "9/3",
}
The website when I run will correctly show something like:我运行时的网站将正确显示如下内容:
Name: Julia
Birthday: 9/3
However, I want to add a function that changes the birthday string from '9/3' to something like 'March 9th'.但是,我想添加一个 function 将生日字符串从“9/3”更改为“3 月 9 日”。 I have the function, we will call birthdayFormatter(), already implemented, but how would I call the function in a way where in setState, it would change the '9/3' to 'March 9th' so in the render return, I should see:
我有 function,我们将调用birthdayFormatter(),已经实现,但是我将如何调用 function,在 setState 中,它会将“9/3”更改为“3 月 9 日”,所以在渲染返回中,我应该看到:
Name: Julia
Birthday: March 9th
I have been trying to call functions insider the render() return but none of these have worked.我一直在尝试调用 render() 返回内部的函数,但这些都没有奏效。 How would I do something like this?
我该怎么做这样的事情? Just note that this should be done with no button clicks whatsoever, just normally loading the page.
请注意,这应该在没有任何按钮点击的情况下完成,只需正常加载页面即可。
You want to create a new object data
with the new value for birthday
after calling birthdayFormatter()
, only then, store it in the state using setState()
.您想在调用
birthday
birthdayFormatter()
后创建一个新的object data
,然后使用setState()
将其存储在state 中。 Like so:像这样:
let currState = {...this.state};
currState.data.birthday = birthdayFormatter(currState.data.birthday);
this.setState(currState);
However, you said you want it done on loadup, so just call it after fetching and before setting the state:但是,您说您希望它在加载时完成,所以只需在获取之后和设置 state 之前调用它:
class myFunction extends React.Component {
constructor(props) {
super(props);
this.state = {
data: {}
}
}
componentDidMount() {
fetch('/api/data').then(r => r.json()).then(data => {
data.birthday = birthdayFormatter(data.birthday); //here
this.setState({data: JSON_data});
}
render() {
return(
<h1>Name: {this.state.data.name}</h1>
<p>Birthday:{this.state.data.birthday} </p>
)
}
}
export default myFunction;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.