ReactJS 如何调用 function 在 setState 后更改 JSON dict 值？

Question

假设我目前有一个 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;

在我的数据变量中，它将是一个具有两个键/值的库（1 代表姓名，1 代表生日）。 所以一个例子可能是：

data = {
    "name": "Julia"
    "birthday": "9/3",
}

我运行时的网站将正确显示如下内容：

Name: Julia
Birthday: 9/3

但是，我想添加一个 function 将生日字符串从“9/3”更改为“3 月 9 日”。 我有 function，我们将调用birthdayFormatter()，已经实现，但是我将如何调用 function，在 setState 中，它会将“9/3”更改为“3 月 9 日”，所以在渲染返回中，我应该看到：

Name: Julia
Birthday: March 9th

我一直在尝试调用 render() 返回内部的函数，但这些都没有奏效。 我该怎么做这样的事情？ 请注意，这应该在没有任何按钮点击的情况下完成，只需正常加载页面即可。

Answer 1

您想在调用birthday birthdayFormatter()后创建一个新的object data ，然后使用setState()将其存储在state 中。 像这样：

let currState = {...this.state};
currState.data.birthday = birthdayFormatter(currState.data.birthday);
this.setState(currState);

但是，您说您希望它在加载时完成，所以只需在获取之后和设置 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;