Question

我正在尝试将数组的值赋给反应项目中的状态。所以，我将我的状态定义为：

  constructor(props) {
    super(props);
    this.state = {
      category: []
    }
  }

然后，我试图获取API调用的输出并将其分配给react组件的状态。我使用下面的代码来获得所需的输出。

 componentDidMount() {
  readableAPI.getCategories().then(category => {
    if (category) {
        category.categories.map(category => {
          console.log(category.name) //output : react, redux, react-native
          this.setState({ category : category.name})
        })
    }
    console.log(this.state.category) //output: react-native
  })
}

想要的是设置“类别”，它是具有三个类别的数组的组件的状态。因此，类别状态应该是：[react，redux，react-native]，这样我就可以使用类别数组中的各个项目为类别数组中的每个项目创建一个按钮。所以，现在应该有三个项目的三个按钮，即反应，redux，react-native。但是现在，我无法使用将项目分配到类别状态数组中。如何做到这一点？任何人都可以建议我。

Answer 1

您需要创建一个数组，然后将状态设置为数组，而不是每次都设置单个项目。 setState也是异步的，因此您应该使用callback来检查更新后的状态。

componentDidMount() {
  readableAPI.getCategories().then(category => {
    if (category) {
        const categoryNames = category.categories.map(category => {

          return category.name;
        })

          this.setState({ category : categoryNames}, () => {console.log(this.state.category)})
    }

  })
}

如何在结果列表上映射（）并将结果数组设置为reactjs

1 个答案: