React 中不同对象的通用设置状态函数答案

【问题标题】：Generic set state function for different objects within ReactReact 中不同对象的通用设置状态函数
【发布时间】：2021-04-13 19:34:29
【问题描述】：

我有一个非常基本的组件，其中包含状态内的 2 个对象。

export default class MainForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time_frame: {},
            event_view: {},
       }
   }
}

如果我的用户单击某个复选框，这些对象中的每一个都包含一个值名称和 true，因此它会构建一个值列表，例如

"event_view": {"app":true, "web":true}

为了处理更改，我创建了每个对象的副本，然后填写用户选择的值，我想知道在 React 中是否有通用的方法来执行此操作？而不必检查event.target.name 值

我的方法似乎效率不高。

handleRadioChange(event) {
    let name = event.target.name
    let timeFrameCopy = {...this.state.time_frame};
    let eventViewCopy = {...this.state.event_view};

    if (name === "time_frame") {
        timeFrameCopy[event.target.value] = true
        this.setState({
            [name]: timeFrameCopy,
        }, this.checkState)
        return
    }

    if (name === "event_view") {
        eventViewCopy[event.target.value] = true
        this.setState({
            [name]: eventViewCopy,
        }, this.checkState)
        return
    }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以试试这个，也可以保存你以前的状态

this.setState(prevState => ({
  ...prevState,
  [name]: value
}))

【讨论】：