Node.js 如何将只有1个嵌套状态的状态应用于MongoDB

我试图在对密码进行哈希运算时获取mongoDB的输入值

但是我的方案中的密码在一个对象（localProvider）中。（这仅用于教育目的，这是我的老师编写的代码）

我尝试在register.js中使用onChange传递输入值

[event.target.name]：event.target.value

只有这行代码仅适用于不在对象内部的单个值。 正如您在方案中所看到的，据我所知，无法将值传递给单个状态值和嵌套状态值

那么，有没有一个解决方案来修复代码，这样我就可以在1个handleChange中将用户名和电子邮件推送到状态，并将密码推送到localProvider

来自my register.js的代码

class Signup extends Component {
  constructor() {
        super()
        this.state = {
            username: '',
      email: '',
      redirectTo: null,
      localProvider:{
         password: ''

      }


    }

        this.handleSubmit = this.handleSubmit.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }
  handleInputChange(event, value){
      this.setState({
        [event.target.name]: event.target.value
      })
  }
  handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let statusCopy = Object.assign({}, this.state);
    statusCopy.localProvider[inputName].value = inputValue;

    this.setState(statusCopy);
  }
    handleSubmit(event) {
        console.log('sign-up handleSubmit, username: ')
        console.log(this.state.username)
        event.preventDefault()

        //request to server to add a new username/password
        axios.post('/api/v1/users/', {
            ...this.state
        })
            .then(response => {
                console.log(response)
                if (!response.data.errmsg) {
          console.log('successful signup')
          this.props.history.push("/");
                } else {
                    console.log('username already taken')
                }
            }).catch(error => {
                console.log('signup error: ')
                console.log(error)

            })
  }  
  render() {
    const { classes } = this.props;



    return (
      <React.Fragment>
        <CssBaseline />
        <Paper className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form  className={classes.form}>
          <FormControl margin="normal" required fullWidth>
              <InputLabel htmlFor="name">Name</InputLabel>
              <Input name="username" type="text" id="username"  autoComplete="username" onChange={this.handleInputChange}  />
            </FormControl>
            <FormControl margin="normal" required fullWidth>
              <InputLabel htmlFor="email">Email Address</InputLabel>
              <Input id="email" name="email" autoComplete="email" onChange={this.handleInputChange} />
            </FormControl>
            <FormControl margin="normal" required fullWidth>
              <InputLabel htmlFor="password">Password</InputLabel>
              <Input type="password" id="password" autoComplete="current-password" onChange={this.handleChange} name="password"/>
            </FormControl>
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"

            >
              Sign in
            </Button>
          </form>
        </Paper>
      </React.Fragment>
    )
  }
}

export default withStyles(styles)(Signup);```

类注册扩展组件{
构造函数（）{
超级（）
此.state={
用户名：“”，
电子邮件：“”，
重定向到：null，
本地提供者：{
密码：“”
}
}
this.handleSubmit=this.handleSubmit.bind（this）
this.handleChange=this.handleChange.bind（this）
}
handleInputChange（事件、值）{
这是我的国家({
[event.target.name]：event.target.value
})
}
手柄更换（el）{
让inputName=el.target.name；
让inputValue=el.target.value；
让statusCopy=Object.assign（{}，this.state）；
statusCopy.localProvider[inputName].value=inputValue；
此.setState（statusCopy）；
}
handleSubmit（事件）{
log（'注册handleSubmit，用户名：'）
console.log（this.state.username）
event.preventDefault（）
//请求服务器添加新用户名/密码
axios.post（“/api/v1/users/”{
…这个州
})
。然后（响应=>{
console.log（响应）
如果（！response.data.errmsg）{
console.log（'成功注册'）
this.props.history.push（“/”）；
}否则{
console.log（'用户名已被使用'）
}
}).catch（错误=>{
console.log（'注册错误：'）
console.log（错误）
})
}  
render（）{
const{classes}=this.props；
返回(
登录
名称
电子邮件地址
密码
登录
)
}
}
导出默认样式（样式）（注册）```

Object.assign（）只复制到一个级别的深度，您需要对两个级别进行深度复制，因此您可以使用它两次，或者在对象上使用spread操作符也可以

let nextState = {...this.state, localProvider: {...this.state.localProvider, [el.target.name]: [el.target.value] } };
this.setState(nextState);

---

查找有关嵌套状态更改的更多信息。

哦，这是因为您从未调用handleSubmit函数。去吧，把它传给你的朋友。哈哈，一个愚蠢的错误！我现在在handleInputChange上得到一个错误，即this.setState不是一个函数。有什么线索可以修复吗？是的，添加this.handleInputChange=this.handleInputChange.bind（this）；在构造函数内部

  handleChange(el) {
    let inputName = el.target.name;
    let inputValue = el.target.value;

    let providerCopy = Object.assign({}, this.state.localProvider); // new
    let statusCopy = Object.assign({}, this.state, {localProvider: providerCopy}); //edited
    statusCopy.localProvider[inputName].value = inputValue;

    this.setState(statusCopy);
  }

let nextState = {...this.state, localProvider: {...this.state.localProvider, [el.target.name]: [el.target.value] } };
this.setState(nextState);