React 项目中未捕获的 ReferenceError

Question

我正在做一个学习 React 的小项目，但遇到了困难。

我的问题： 当调用 post 请求时，我得到："Uncaught ReferenceError: val is not defined"。有人能弄清楚为什么吗？？

此外，我希望 ul 重新呈现每个新创建的 post。如果我改变这个：

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

对此：

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

我没有收到任何错误，但我需要刷新页面才能看到 ul 上的新 post。

这是我的代码： 希望你们能弄明白并帮助我:)

  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 对比 { 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

Uncaught ReferenceError in React project

javascript

reactjs

fetch-api