this.props.children.map at react native is not wor

问题:

I want to render a child component from a parent component by passing to it one object from array of objects fetched from an api.

TypeError: this.props.posts.map is not a function

renderPosts() {
return this.props.posts.map(post =>
  <HomeCard key={post.id} postData={post} />
    );
  }

---

All the component:

class Home extends Component {
componentWillMount() {
  this.props.getUserPosts();
}

renderPosts() {
return this.props.posts.map(post =>
  <HomeCard key={post.id} postData={post} />
    );
  }


  render() {
    return (
      <View>
        <View style={{ paddingBottom: 55 }}>
            <SearchBar />
        </View>

        <ScrollView>
        {this.renderPosts()}
        </ScrollView>

      </View>
    );
  }
}

const mapStateToProps = state => {
const posts = state.homePost;
console.log('posts', posts);

return { posts };
};


export default connect(mapStateToProps, { getUserPosts })(Home);

回答1:

I suspect this is because this.props.posts is undefined (empty or whatever default you have it set to) when Home being mounted. Since you aren't giving us any log outputs, it's hard to tell but this is a very common mistake.

The immediate fix is to give it a default value either where you define your initial state for your reducer or in mapStateToProps. The latter looking something like this (adapting your code):

const mapStateToProps = state => {
  const posts = state.homePost || [];
  console.log('posts', posts);

  return { posts };
};

While this will fix your error, another thing you need to correct is the common misconception that whatever is in componentWillMount will execute prior to mounting. This is not true and is one of the reasons that this lifecycle method (and componentWillReceiveProps and componentWillUpdate) will be deprecated in the future.

Your code here:

componentWillMount() {
  this.props.getUserPosts();
}

is asynchronous since you mention fetching this data. getUserPosts will fire but isn't guaranteed to complete before mounting. So while you think this.props.posts will be set to some value before rendering, that is not going to be the case. Hence why you are getting the not a function error message.