javascript - React - 访问对象集合

Question

我正在从 Firebase 下载数据，它采用对象集合的形式。我想根据 props.id 值从那里显示某些项目。

我是这样做的:

export default class Ingredient extends React.Component {
  constructor(props) {
    super(props);

    this.id = this.props.id;
    this.db = new Firebase('https://xxx.firebaseio.com/ingredients');

    this.state = {
      loaded: false,
      data: []
    };
  }

  componentDidMount() {
    this.db.on('value', (data) => {
      this.setState({
        loaded: true,
        data: data.val()
      });
    });
  }

  getElement() {
    return this.state.data[this.props.id];
  }

  render() {
    return (
      /*  - {this.state.data[this.props.id].name} */
      <strong>
        {this.getElement()}
      </strong>
    )
  }
}

不幸的是，React 返回一个错误:

Uncaught Invariant Violation: Objects are not valid as a React child

我不太明白我在这里做错了什么，有人可以帮我吗？

Answer 1

getElement 方法返回接收到的数据，它是一个object 并且不是有效的 React 元素，这意味着它不能被直接渲染。只有具有自然字符串表示的 React 元素或原始值可以在树中呈现，这意味着如果您的数据具有 name 字符串属性，这将起作用:

<strong>
 {this.getElement().name}
</strong>