Question

我只是制作一个简单的表单组件，该组件读取用户信息并将其显示为值形式的表单。编辑后，可以保存或取消更改。但是本地状态更新了它的父状态，这让我抓狂了。

我有一个父组件，其状态对象内有一个用户信息对象：

 usrInfo: {
    userName: {name: 'usrname', title: "User Name", value: 'state.user'}, 
    firstName: {name: 'fname', title: "First Name", value: "asdf"},  
    lastName: {name: 'lname',  title: "Last Name", value: "asdf"}, 
    title: {name: 'title', title: "Title", value: "asdf" }, 
    email: {name: 'email',title: "E-mail",value: "asdf@asdf.com"}
  },

我的子组件显示此状态没问题。在子级中单击一个编辑按钮，并在子级中也调用一个函数，以将userCashe子级状态设置为其上级用户状态：

  casheState() {;
    this.setState((prevState, props) => { 
        return {userInfoCashe: props.user };
    })
  }

然后使用userInfoCash作为值填充表单，并在编辑表单时更新子状态：

  changeHandler = (event) => {
    let usrCopy = {...this.state.userInfoCashe};
    usrCopy[event.target.id].value = event.target.value;
    this.setState({userInfoCashe: usrCopy});

    console.log(this.state.userInfoCashe[event.target.id].value)
    console.log(this.props.user[event.target.id].value)
            // ^^ these are the same, why?
  };

此函数更改其父用户状态。为什么会这样？为什么？我以为react是建立在单向数据绑定上的。

谢谢！

Answer 1

this.setState不会立即更新状态。其async。因此，如果您的console.log在之前和之后显示相同的状态，则仅是因为这个。您可以尝试执行以下操作：

this.setState({userInfoCashe: usrCopy}, ()=> {console.log(this.state.userInfoCashe);})

实际查看您的状态是否发生突变。希望这会有所帮助。

Answer 2

首先，我建议使用lodash npm，它将支持javascript函数

参考链接：https://www.npmjs.com/package/lodash

install lodash：npm install --save lodash

安装后，将其导入到您想使用的文件中

    import _ from "lodash";


    changeHandler = (event) => {
    let usrCopy = _.cloneDeep(...this.state.userInfoCashe);

    usrCopy[event.target.id].value = event.target.value;
    this.setState({userInfoCashe: usrCopy});

    console.log(this.state.userInfoCashe[event.target.id].value)
    console.log(this.props.user[event.target.id].value)
            // ^^ these are the same, why?
  };

请尝试此操作，它不会更新您的原始状态，而只会更新状态副本所在的位置。

React：为什么我的子组件会更新其父组件的状态？

2 个答案: