Question

我想知道为什么 this.setState 函数在我开始输入类型时会给出此错误。我使用箭头功能相同。它给我错误“无法读取null的属性”名称”。但是当我使用更改状态的简单直接方法时，它就可以工作。

这是我的代码：

class UpstreamForm extends Component {

    state = {
        name: '',
        email: ''
    }

    onSubmitHandler() {
        this.props.changeData(this.state)
    }

    changeHander(event) {
        this.setState((state) => {
            return {
                [event.target.name] : event.target.value
            }
        })
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmitHandler.bind(this)}>
                    <input 
                    type="text"
                    placeholder="name"
                    name="name"
                    onChange={this.changeHander.bind(this)}
                     />
                     <input 
                    type="text"
                    placeholder="email"
                    name="email"
                    onChange={this.changeHander.bind(this)}
                     />
                     <button>Submit!</button>
                </form>
            </div>
        )
    }

}

下面的那个可行，但是为什么我上面的那个不可行？真的很棒！

changeHandler = (event) => 
        this.setState({
            [event.target.name] : event.target.value
        })

Answer 1

成功了，谢谢@Al Aoutar Hamza。

根据React文档，在事件回调被调用后，所有属性都将无效。因此，您不能以异步方式访问事件。

解决方案：使用回调函数时，应在事件上调用event.persist（）。

 changeHander(event) {
        event.persist();
        this.setState((state) => {
            return {
                [event.target.name] : event.target.value
            }
        })
    }

Answer 2

应该可以。我认为上一个正在擦除您的现有状态。您只需在更新新状态时保持先前状态即可。

changeHander(event) {
    this.setState((state) => {
        return {
            ...state,
            [event.target.name] : event.target.value
        }
    })
}

ReactJS无法读取null的属性“名称”

2 个答案: