Javascript 无法读取属性'；设置状态'；用于发送文本消息的表单中未定义的

我正在尝试构建一个react公共聊天应用程序，在尝试发送消息时显示以下错误所有其他功能都正常工作，但每当我尝试发送消息时，它就会失败 我的聊天室代码是这样的，它有发送和阅读文本消息的选项

 class Chat extends Component {

  constructor(props){
    super(props);
    this.state={
      user:auth().currentUser,
      chats:[],
      content:'',
      readError: null,
      loadingChats:false,
      writeError:null
    };
    

  }


async componentDidMount(){
  this.setState({readError:null})
  try{
    db.ref("chats").on("value",snapshot =>{
      let chats=[];
      snapshot.forEach((snap)=>{
        chats.push(snap.val());
      })
      this.setState({chats})
    })
  }catch(error){
    this.setState({readError:error.message})
  }
}

handleChange(event) {
  this.setState({ content: event.target.value });
}

async handleSubmit(event){
  event.preventDefault()
    this.setState({writeError:null});
    try{
      await db.ref("chats").push({
        content:this.state.content,
        timestamp:Date.now(),
        uid:this.state.user.uid
      });
      this.setState({content:''})
    }catch(error){
      this.setState({writeError:error.message})
    }
  }





render() {
  return (
    <div>

      <div className="chats">
        {this.state.chats.map(chat => {
          return <p key={chat.timestamp}>{chat.content}</p>
        })}
      </div>
      <form onSubmit={this.handleSubmit}>
            <input  className="form-control" placeholder="Enter your Text" style={{marginBottom :0 + 'px',marginTop:32 +'rem',marginLeft:10 + 'px',marginRight:20 + "px" , width: 83 +'%',bottom:3,position:'absolute'}}
              onChange={this.handleChange}
              value={this.state.content}
            />
            <button className=" btn btn-success" style={{marginTop:10 +'px',position:'absolute',right:3,bottom:3}}>
              Send
            </button>
          </form>
      <div>
        Login in as: <strong>{this.state.user.email}</strong>
      </div>
    </div>
  )
}
}
export default Chat;

我的聊天室代码是这样的，它有发送和阅读文本消息的选项

 class Chat extends Component {

  constructor(props){
    super(props);
    this.state={
      user:auth().currentUser,
      chats:[],
      content:'',
      readError: null,
      loadingChats:false,
      writeError:null
    };
    

  }


async componentDidMount(){
  this.setState({readError:null})
  try{
    db.ref("chats").on("value",snapshot =>{
      let chats=[];
      snapshot.forEach((snap)=>{
        chats.push(snap.val());
      })
      this.setState({chats})
    })
  }catch(error){
    this.setState({readError:error.message})
  }
}

handleChange(event) {
  this.setState({ content: event.target.value });
}

async handleSubmit(event){
  event.preventDefault()
    this.setState({writeError:null});
    try{
      await db.ref("chats").push({
        content:this.state.content,
        timestamp:Date.now(),
        uid:this.state.user.uid
      });
      this.setState({content:''})
    }catch(error){
      this.setState({writeError:error.message})
    }
  }





render() {
  return (
    <div>

      <div className="chats">
        {this.state.chats.map(chat => {
          return <p key={chat.timestamp}>{chat.content}</p>
        })}
      </div>
      <form onSubmit={this.handleSubmit}>
            <input  className="form-control" placeholder="Enter your Text" style={{marginBottom :0 + 'px',marginTop:32 +'rem',marginLeft:10 + 'px',marginRight:20 + "px" , width: 83 +'%',bottom:3,position:'absolute'}}
              onChange={this.handleChange}
              value={this.state.content}
            />
            <button className=" btn btn-success" style={{marginTop:10 +'px',position:'absolute',right:3,bottom:3}}>
              Send
            </button>
          </form>
      <div>
        Login in as: <strong>{this.state.user.email}</strong>
      </div>
    </div>
  )
}
}
export default Chat;

类聊天扩展组件{
建造师（道具）{
超级（道具）；
这个州={
用户：auth（）.currentUser，
聊天室：[]，
内容：“”，
readError:null，
加载聊天记录：错误，
writeError:null
};
}
异步组件didmount（）{
this.setState（{readError:null}）
试一试{
db.ref（“聊天”）.on（“值”，快照=>{
让我们聊天=[]；
snapshot.forEach（（快照）=>{
chats.push（snap.val（））；
})
this.setState（{chats}）
})
}捕获（错误）{
this.setState（{readError:error.message}）
}
}
手变（活动）{
this.setState（{content:event.target.value}）；
}
异步handleSubmit（事件）{
event.preventDefault（）
this.setState（{writeError:null}）；
试一试{
等待数据库参考（“聊天”）.推送({
内容：this.state.content，
时间戳：Date.now（），
uid:this.state.user.uid
});
this.setState（{content:''}）
}捕获（错误）{
this.setState（{writeError:error.message}）
}
}
render（）{
返回(
{this.state.chats.map（chat=>{
return
{chat.content}
})}
发送
以以下身份登录：{this.state.user.email}
)
}
}
导出默认聊天；

只需将方法绑定到类，因此基本上更改构造函数：

  constructor(props){
    super(props);
    this.state={
      user:auth().currentUser,
      chats:[],
      content:'',
      readError: null,
      loadingChats:false,
      writeError:null
    };
  }

为此：

  constructor(props){
    super(props);
    this.state={
      user:auth().currentUser,
      chats:[],
      content:'',
      readError: null,
      loadingChats:false,
      writeError:null
    };
    
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this)
  }

---

您是否应该将

（）

添加到您的handleChange通话中

this.handleChange（）

而不是

this.handleChange

？是的，因为我们正在触发handleChange上的事件，并以方法而不是函数调用的形式调用。感谢您指出。。。事实上，我绑定了handleChange和handleSubmit，但天知道我为什么要把它们注释掉xd