Question

我有一个结果列表，每个结果都有以下数据：id，标题，系统，单位。这些数据是对象的形式，例如：（{id：1，标题：“主机”，系统：“船”，单位：“ C”}）。

每个结果都有一个onclick，它调用状态为我的addFunc函数。看起来像这样：

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)
  }

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

Answer 1

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

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

似乎您将其存储为{ selectedData: joined }状态，因此应该可以正常工作。您的构造函数正确地初始化了状态this.state = { selectedData:[] }，因此，希望此修复程序可以立即使用。

从ReactJS Docs: Rendering Elements中了解有关render()的更多信息。

如何在React.js中在屏幕上显示数组对象

1 个答案: