如何在此代码中修复“无法读取null的属性'选项”？

Question

我想将用户添加到我在状态中定义的options数组。问题是每当我使用prevstate.options.concat([username])时。它显示了这个错误。当我只是使用this.state.push(username)将用户名推送到数组时，不会发生错误。但是对于React的良好实践，我们永远不会直接改变状态变量，这就是我使用prevstate的原因所以我想知道为什么我会收到这个错误。

当我在this.state.optionsso中声明我在控制台中显示用户和adduser的价值时，我想知道为什么我的setState不能使用prevstate变量？

class Login extends React.Component{
    constructor(props){
        super(props);
        this.addUser = this.addUser.bind(this)
        this.State = {
            options : ['hello']
        }
    }

    addUser(username){
        console.log(username)
        console.log(this.State.options)
        this.State.options.push(username)

        this.setState((prevState)=>{
            // console.log(prevState.options)
            return {
                options : prevState.options.concat([username])
            }
        })
    }

    render(){
        return(
            <div>
                <Form addUser = {this.addUser}/>
            </div>
        );
    }
}



class Form extends React.Component{
    constructor(props){
        super(props);
        this.formData = this.formData.bind(this);
    }
    formData(e){
        e.preventDefault();
        const username = e.target.elements.user.value.trim();
        console.log(username);
        this.props.addUser(username);
    }
    render(){
        return(
            <div>
                <form onSubmit={this.formData}>
                    Name: <input type="text" name="user"></input>
                        <input type ="submit"></input>
                </form>
            </div>

        )
    }
}

ReactDOM.render(<Login /> , document.getElementById('app'));  

实际结果是使用setState在options数组中连接用户

Answer 1

好吧，我在sandBox中嘲笑你的组件，以下似乎正在起作用。这是sandBox：https://codesandbox.io/s/mq3qyvvjkx

您的问题似乎是在您的组件中多次使用this.State而不是this.state（小写s）。这就是你收到错误的原因。

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.addUser = this.addUser.bind(this);
    this.state = {
      options: ["hello"]
    };
  }

  addUser(username) {
    console.log(username);
    console.log(this.state.options);
    this.state.options.push(username);

    this.setState(prevState => {
      // console.log(prevState.options)
      return {
        options: prevState.options.concat([username])
      };
    });
  }

  render() {
    return (
      <div>
        <Form addUser={this.addUser} />
      </div>
    );
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.formData = this.formData.bind(this);
  }
  formData(e) {
    e.preventDefault();
    const username = e.target.elements.user.value.trim();
    console.log(username);
    this.props.addUser(username);
  }
  render() {
    return (
      <div>
        <form onSubmit={this.formData}>
          Name: <input type="text" name="user" />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

以下产生以下控制台输出，没有控制台错误。

Corbuk
Corbuk
["hello", "corbuk"]

如果这是预期的输出，请告诉我？