Reactjs中如何在屏幕上显示数组中的对象

Question

我有一个结果列表，其中每个结果都有以下数据：id、title、system、unit。 此数据的形式为 object，例如：({id:1, title: "main engine", system: "ship", unit: "C"})。

每个结果都有一个onclick调用我的addFunc function 是 state。这看起来像这样：

class Search extends Component {
  constructor(props) {
    super(props);
    this.addFunc = this.addFunc.bind(this);
    this.state = { selectedData:[] }
  }
  addFunc(resultdata) {
    var joined = this.state.selectedData.concat(resultdata);
    this.setState({ selectedData: joined })
    console.log(joined)
  }

目前，每个 object 在单击时都会添加到我joined的数组中，我可以在我的控制台中看到它。 我想在屏幕上显示这个

Answer 1

尝试使用 ReactJS 中的render()方法显示您的数据。

class Search extends Component {
    // ...
    render() {
        return (
            <div>
                {this.state.selectedData}
            </div>
        );
    }
}

看来您将其作为{ selectedData: joined }存储到 state 中，所以这应该可以正常工作。 您的构造函数将 state 正确地初始化为this.state = { selectedData:[] } ，因此，希望此修复程序开箱即用。

从ReactJS 文档：渲染元素中找到更多关于render()的信息。