javascript - 无法在 React 和 Meteor 中使用 componentWillMount 读取未定义的属性

Question

我一直无法弄清楚如何解决此错误。我认为这与使用“bind”有关，因为这是 ES6。我尝试将 .bind(this) 添加到构造函数的末尾。我还尝试将“componentWillMount”替换为“componentDidMount”。这是使用 Meteor 和 React。

错误:

未捕获类型错误:无法读取未定义的属性“符号” 在 Trades.render (Trades.jsx:9)

App.js

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { trades: [] };
  };

  componentWillMount() {
    this.setState({ trades: [
      {
        _id: 1,
        symbol: "GOOG",
        shares: 25,
      },
      {
        _id: 2,
        symbol: "WMT",
        shares: 50,
      },
    ]});
  }.bind(this)

  renderTrades() {
    return this.state.trades.map((trade) => (
      <Trades key={trade._id} trade={trade} />
    ));
  }

  render() {
    return(
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
          <div className="container">
              <div className="col s12 m4"><Trades />
              <h2>Trades</h2>
                <Divider/>
                  <List>
                    {this.renderTrades()}
                  </List>
                <Divider/>
            </div>
            </div>
          </div>
      </MuiThemeProvider>
    )
  }
}

Trades.js

  export default class Trades extends Component {
    render() {
      return (
        <ListItem
          primaryText={this.props.trade.symbol}
          leftAvatar={<Avatar src="img.jpg" />}
          />
      )
    }
  }

Answer 1

在 componentWillMount 中使用 setState 不是一个好主意( docs )，使用 componentDidMount相反，检查 Trades 中的数组是否不为空组件:

  componentDidMount() {
    this.setState({ trades: [
      {
        _id: 1,
        symbol: "GOOG",
        shares: 25,
      },
      {
        _id: 2,
        symbol: "WMT",
        shares: 50,
      },
    ]});
  }

 export default class Trades extends Component {
    render() {
      return (
        this.props.trade && this.props.trade.symbol? <ListItem
          primaryText={this.props.trade.symbol}
          leftAvatar={<Avatar src="img.jpg" />}
          /> : <div>loading...</div>

      )
    }
  }