试图更新crud时的奇怪行为

Posted 2021-03-19

我有一个奇怪的行为，我相信是因为我现在开始使用REACT。

在我的更新中，我可以用我的数据库中的所有数据显示一个模态 defaultValue={this.state.user.username}我的模态打开数据确定，然后我做我的CREATE工作。onChange={e => this.setState({ username: e.target.value })}

但在我的更新方法中，我试图打印我的 <Form onSubmit={this.update}> 资料 JSON.stringify 如果我有两个字段，只是编辑了其中一个字段，他只是给我带来其中一个字段，他也应该给我带来另一个字段。

构造函数

constructor(props) {
        super(props)
        this.state = {
            users: [],
            user: { id: '', username: '', firstName: '', lastName: '', lang: '' }
        }
    }

从

<Form onSubmit={this.update}>
  <Row form>
    <Col md={4}>
       <FormGroup>
          <Label>Username</Label>
             <Input
               type="email"
               name="username"
               defaultValue={this.state.user.username}
               onChange={e => this.setState({ username: e.target.value })} />
        </FormGroup>
     </Col>
etc...

更新方法

update = async e => {
e.preventDefault();
const { username, firstName, lastName } = this.state;

const json = JSON.stringify({
    username: username,
    firstName: firstName,
    lastName: lastName,
    lang: 'EN'
})
console.log(json)
etc...

答案

你用数组初始化你的状态 users 和一个对象 user. 然后你调用setState来更新 username 但用户名在你的状态根目录下不存在。

你应该这样调用setState来更新user.username。

this.setState({ user: { username: e.target.value } })

如果你想保留state.user的其他属性，你应该这样调用setState来更新user.username：

this.setState({ user: { ...this.state.user, username: e.target.value } })

顺便说一下，如果你开始使用React，忘记组件类，你应该学习如何编写功能组件。