javascript - 无法读取用于发送短信的表单中未定义的属性“setState”

Question

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

我的聊天框代码是这样的，它可以选择发送和阅读短信

 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;

标签： javascriptreactjs

Answer 1

只需将你的方法绑定到你的类，所以基本上改变你的构造函数：

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