时间戳

首页 > 解决方案 > 尝试更新 crud 时的奇怪行为

reactjs - 尝试更新 crud 时的奇怪行为

问题描述

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

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

但在我的更新方法中，我尝试打印我的<Form onSubmit={this.update}>数据JSON.stringify并接收我在输入中输入的数据。如果我有 2 个字段并且刚刚编辑了一个，他只给我带来了其中的 1 个，他也应该给我带来另一个字段！

构造函数

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...

标签： reactjs

解决方案

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

您应该以这种方式调用 setState 来更新 user.username：

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

如果你想保留 state.user 的其他属性：

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

顺便说一句，如果你是从 React 开始的，忘记组件类，你应该学习如何编写函数式组件

推荐阅读