Question

我的状态变量为：

constructor(props) {
        super(props)
        this.state = {
            fields: {
                applicantName: '',
                applicantType: '',
                applicantAddress: '',
                applicantContact: '',
                buildingName: '',
                buildingAddress: '',
                area:'',
            }
        }

        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

我有一个功能：

handleChange(event) {
    this.setState((prevState) => {
        fields: {
            ...prevState.fields,     //Unexpected token ..
            {
                event.target.name: event.target.value,
            },
        }
    });
}

我在这里看不到任何类型的语法...但是我的模块构建失败，并且在'...'附近显示语法错误

Answer 1

您需要返回Object

handleChange(event) {
// note here  => ({
    this.setState((prevSate) => ({
        fields: {
            ...prevState.fields,
//and there ..
                [event.target.name]: event.target.value
        })
    });
}

更新

根据阿卜杜拉（Abdullah）的建议，将...prevState用于wohle状态会更好：

handleChange(event) {
// note here  => ({
    this.setState((prevSate) => ({
        // note change here
        ...prevState,
        fields: {
            ...prevState.fields,
//and there ..
                [event.target.name]: event.target.value
        })
    });
}

更新2

基于PraveenRaoChavan评论：

打字错误修复：需要使用event而不是e

Answer 2

handleChange(event) {
    this.setState(prevState => ({
        fields: {
            ...prevState.fields,
            {
                event.target.name: e.target.value,
            },
        }
    }));
}

Answer 3

您有错字

更改

this.setState((prevSate) => { }

到

this.setState((prevState) => { }

无法通过prevState更新React中的表单字段

3 个答案: