Javascript 反应：当onChange事件发生时，我的文本输入的现有值被清除

我是新手。我正在尝试创建一个用户可以编辑自己帖子的页面。因此，文本输入的值是用户发布帖子时输入的值。现在，当我尝试更改文本输入中的现有文本时，表单中可用的值被清除，用户必须重新输入数据

我需要用户更改输入文本中的现有文本，而不是新输入。这是我的密码

import React, { Component } from 'react'

class EditProduct extends Component {
    constructor(props) {
        super(props)
        this.state = {
            product: []
        }

        this.handleChange = this.handleChange.bind(this)
    }
    componentDidMount() {
        fetch("http://localhost:8000/lender/edit_product_display.php?id=" + this.props.match.params.productId)
            .then(response => response.json())
            .then((productResponse) => {
                this.setState({
                   product: productResponse
                })
            })
            .catch(error => console.log(error))
    }
    handleChange(event){
        const name = event.target.name

        this.setState({
            product: [{
                [name]: event.target.value
            }]
        })
    }
    render() {
        return(
            <div key={this.state.product.product_id}>
                Product ID: {this.props.match.params.productId}
                <br /><br />
                Product Name:
                <input
                    type="text"
                    name="product_name"
                    value={this.state.product.product_name}
                    onChange= {this.handleChange}
                />

                <br />
                Product Model:
                <input 
                    type="text"
                    name="product_model"
                    value={this.state.product.product_model}
                    onChange={this.handleChange}
                 />
            </div>
            )
    }
}

export default EditProduct

import React，{Component}来自“React”
类EditProduct扩展组件{
建造师（道具）{
超级（道具）
此.state={
产品：[]
}
this.handleChange=this.handleChange.bind（this）
}
componentDidMount（）{
取回（“http://localhost:8000/lender/edit_product_display.php?id=“+this.props.match.params.productId）
.then（response=>response.json（））
.然后（（productResponse）=>{
这是我的国家({
产品名称：productResponse
})
})
.catch（错误=>console.log（错误））
}
手变（活动）{
const name=event.target.name
这是我的国家({
产品：[{
[名称]：event.target.value
}]
})
}
render（）{
返回(
产品ID:{this.props.match.params.productId}



产品名称：


产品型号：
)
}
}
导出默认编辑产品

React仅在顶层自动合并状态。它不会为您合并到

产品

中，因此您必须自己进行：

    handleChange(event){
        const name = event.target.name
        const value = event.target.value

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

---

您的值

value={this.state.product.product_name}

与您用于您所在州的结构不匹配，即产品设置为数组

product:[]

您的值需要反映这一点，例如

this.state.product[0].product_name

或更改您的状态结构仍然我的文本输入会清除现有值，整个状态会重新更新：（@SarathDev哦，我现在明白了。我在其中留下了一个不必要的数组。现在试试。终于起作用了！我已经坐了很长时间了。非常感谢：）你让我开心了！：D