Question

我正在研究一个学习React的小项目，但我陷入了困境。

我的问题：当一个帖子请求被调用时，我得到：“未捕获的ReferenceError：val未定义”。有人可以找出原因??

此外，我希望ul重新渲染每个创建的新帖子。如果我改变了这个：

handleSend(msg){
        this.state.val.push(msg);
        this.setState({val});
    }

到此：

handleSend(msg){
        this.state.val.push(msg);
        this.setState({val: []});
    }

我没有收到任何错误，但我需要刷新页面以查看ul上的新帖子。

这是我的代码： 希望你们能搞清楚并帮助我:)。

  class CoachPage extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.state={
      val: []
    };
  }

  handleSend(msg){
    this.state.val.push(msg);
    this.setState({val});
}

componentDidMount(){
  fetch('http://localhost:3003/api/msgs/')
    .then( res => res.json())
    .then( data => this.setState({ val: data }))
    .catch( console.error ); 
}

 deleteMsg(id){
    return fetch('http://localhost:3003/api/msgs/' + id, {
      method: 'DELETE'
    })
      .then(response =>
        response.json()
      .then(json => {
        return json;
      })
    );
  }

  render() {
    return (
      <div className="container"  style={{color: '#FFF', textAlign: 'right'}}>
        <h1>Coach Page</h1>
        <AddMsg onSend={this.handleSend.bind(this)}/>
        <Panel header="עדכונים" bsStyle="info" style={{float: 'left', textAlign: 'right', width: '40em'}}>
        <ul id="coach-panel-content">
        { 
          this.state.val.map( (msg, index) =>
            <li dir="rtl" key={index} className='myli'>
              {msg.msgdata}
              <span onClick={() => this.deleteMsg(msg._id)}>X</span>
              <hr/>
            </li>
          )
        }
        </ul>
        </Panel>
      </div>
    );
  }
}

export default CoachPage;

Answer 1

<强>更新

你遇到了一些问题：

val为undefined，因为您从未为其分配过值
msg是String而不是Object。在您的渲染方法中，您可以访问Object {msg.msgdata}

val未定义，因为您没有为其分配任何值。

{ val; } // not defined vs { val : "Message" } //defined

handleSend(msg){
 this.setState(prevState => ({val: [...prevState.val, { msgdata: msg }] }));
}

我认为你误解了destructuring assignment

Answer 2

无法保证何时执行setState，因此您最好使用采用更新功能的setState版本;第一个参数是您当前的（最新）状态：

handleSend(msg) {
    this.setState((prevState, props) => {
      return {val: [...prevState.val, msg]};
    });
}

React项目中未捕获的ReferenceError

2 个答案: