反应原生的 this.props.children.map 不起作用 [英] this.props.children.map at react native is not working

问题描述

我想从父组件渲染一个子组件，方法是向它传递从 api 获取的对象数组中的一个对象.

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.

类型错误:this.props.posts.map 不是函数

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

推荐答案

我怀疑这是因为 this.props.posts 是 undefined (空的或任何默认的当 Home 被挂载时，它设置为).由于您没有向我们提供任何日志输出，因此很难判断，但这是一个非常常见的错误.

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.

直接的解决方法是给它一个默认值，无论是在您为减速器定义初始状态的地方还是在 mapStateToProps 中.后者看起来像这样(调整您的代码):

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

虽然这将修复您的错误，但您需要纠正的另一件事是常见的误解，即 componentWillMount 中的任何内容都将在安装之前执行.这不是真的，并且是此生命周期方法(以及 componentWillReceiveProps 和 componentWillUpdate)将来会被弃用.

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.

您的代码:

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

是异步的，因为您提到了获取这些数据.getUserPosts 会触发，但不能保证在安装前完成.因此，虽然您认为 this.props.posts 将在渲染之前设置为某个值，但事实并非如此.因此，为什么您会收到 not a function 错误消息.

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.

这篇关于反应原生的 this.props.children.map 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！