Reactjs “如何修复”；无法读取属性'；选项'；“无效”的定义；在这个代码中？

我想将用户添加到我在状态中定义的选项数组中。问题是每当我使用

prevstate.options.concat（[username]）

时。它显示了这个错误。当我使用

this.state.push（username）

将用户名推送到数组时，不会发生错误。但是对于React的良好实践，我们从不直接更改状态变量，这就是我使用

prevstate

的原因，所以我想知道为什么会出现此错误

当我在

adduser

内声明时，控制台中也会显示user和

this.state.options

的值，所以我想知道为什么我的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'));  

类登录扩展了React.Component{
建造师（道具）{
超级（道具）；
this.addUser=this.addUser.bind（this）
此。状态={
选项：[“你好”]
}
}
addUser（用户名）{
console.log（用户名）
console.log（this.State.options）
this.State.options.push（用户名）
this.setState（（prevState）=>{
//console.log（prevState.options）
返回{
选项：prevState.options.concat（[用户名]）
}
})
}
render（）{
返回(
);
}
}
类形式扩展了React.Component{
建造师（道具）{
超级（道具）；
this.formData=this.formData.bind（this）；
}
表格数据（e）{
e、 预防默认值（）；
const username=e.target.elements.user.value.trim（）；
console.log（用户名）；
this.props.addUser（用户名）；
}
render（）{
返回(
姓名：
)
}
}
ReactDOM.render（，document.getElementById（'app'））；

---

实际的结果是使用setState在选项数组中找到一个用户。好的，我已经在一个沙盒中模拟了您的组件，下面的代码似乎起作用了。这是沙盒：

您的问题似乎已在组件中多次使用

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>
    );
  }
}

---

请让我知道这是否是预期的输出？

this.State

=>

this.State

在您的

构造函数（）中没有发生任何事情。您也可以在
12/13
行中执行与
this.State.options
不
this.State.options
相同的操作吗我注意到这件事了。：）
Corbuk
Corbuk
["hello", "corbuk"]