Javascript 反应组分性质

我正在尝试使用组件属性this.albumButtons来存储albumButtons数组

当调用componentDidMount时，我获取唱片集名称并将其设置为状态。然后，我从名称中调用makeButtons

在我的makeButtons函数中，我将this.albumButtons设置为AlbumButton组件的数组

当我检查这个长度时，我得到0

我做错了什么

export default class ModalContent extends Component {
  constructor(props){
    super(props);
    this.state = {
      albumNames: [],
      isLoading: false,
      isEmptyOfAlbums: false,
    }
    this.albumButtons = []
  }

  componentDidMount(){
    this.setState({isLoading: true})
    const getAlbumsNamesPromise = new Promise ((resolve, reject) => {
      MySwiftClass.getAlbumsNames((arr) => {
        if(arr.length === 0) this.setState({isEmptyOfAlbums: true});
        this.setState({albumNames: arr})
      })
    })
    getAlbumsNamesPromise.then(this.makeButtons).then(this.setState({isLoading: false})) 
  }

  makeButtons() {
    //const component = this;

    return new Promise((resolve, reject) => {
      this.albumButtons = this.state.names.map((name) =>
        <AlbumButton
          key={name}
          name={name}
        />
      )
      resolve()
    })
  }

  render() {
    if (this.state.isLoading){
      return(
      //loading screen
      )
    }
    return(
    <Text>{this.albumButtons.length}</Text>
    )
  }
}

setState是异步的，您需要在setState的回调中解析，以便它等待状态更新为AlbumName：

const getAlbumsNamesPromise = new Promise ((resolve, reject) => {
  MySwiftClass.getAlbumsNames((arr) => {
    if(arr.length === 0) this.setState({isEmptyOfAlbums: true});
    this.setState({albumNames: arr}, resolve)
  })
}) // also need to pass a function into .then, not invoke a function
getAlbumsNamesPromise.then(this.makeButtons).then(() => this.setState({isLoading: false}))

---

你还映射了这个.state.names.map我想你是指这个.state.albumNames.map

谢谢！另外，当我将this.makeButtons作为回调传递时，我必须将其绑定到当前范围或使用箭头函数e=>this.makeButtonse。在这个上下文中，e是什么？e将是你传递给resolve的任何东西。你也可以保持原样，把makeButtons{改为makeButtons==>{这是最好的做法吗？无论哪种方法都可以，就我个人而言，我总是做makeButtons===>{