Question

请仔细检查下面的代码（如果不清楚的话），这是我的问题的扩展版本，codesandbox，

所以我将一些属性从父级传递给子级comp。父级是我的<Main /> comp。，它包装在<Provider> comp中。以允许其访问商店。现在，在孩子中，我有一个基于父项传递的道具来渲染信息的函数，这是我的孩子组件。代码

//Home Component
...
const RenderCard = ({item, isLoading, errMess}) => {
  console.log(item.name)
  
  if(isLoading) {
    return(
      <Loading /> 
      )
  } 
  else if (errMess) {
    return (
      <h4>{errMess}</h4>
      )
  }
  else {
    return(
      <h1>{item.name}</h1>
    ) 
  }
}

const Home = props => {
  return (
   <RenderCard item={props.dish} isLoading={props.dishesLoading} errMess={props.dishesErrMess} />
 )
}
  
...

这是我从父母那里传递道具的方式，

const mapStateToProps = state => {
  return {
    dishes: state.dishes,
    comments: state.comments,
    leaders: state.leaders,
    promotions: state.promotions
  }
}

const mapDispatchToProps = dispatch => ({
  addComment: (dishId, rating, author, comment) => dispatch(addComment(dishId, rating, author, comment)),
  fetchDishes: () => {
    dispatch(fetchDishes())
  }
})

class Main extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.props.fetchDishes()
    console.log(this.props.dishes.dishes.filter(dish => dish.featured)[0])
  }

  render() {
    const HomePage = () => { 
      <Home dish = {this.props.dishes.dishes.filter(dish => dish.featured)[0]} /> 
  }
}
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));

奇怪的是，在第一个代码段的第4行中，console.log（..）消息已成功将所需信息记录到控制台，这意味着道具已传递并到达{{1} } comp。但是，不是在窗口上呈现它，而是得到TypeError无法读取未定义的属性名称。

如果需要任何其他代码部分，请在下面留下评论。

提前谢谢。

Answer 1

问题是，您没有在Main组件的render方法中返回任何组件。您已经声明了方法HomePage。

请参考下面的代码。这应该工作。

更新：

这是有效的沙盒：https://codesandbox.io/s/8nopnq3jo0

您正在尝试在碗碟装载之前进行渲染。因此，添加了条件检查是否已装入碗碟。

function Home(props) {
  return (
    !props.dishesLoading && (
      <div className="container">
        <div className="row align-items-start">
          <div className="col-12 col-md m-1">
            <RenderCard
              item={props.dish}
              isLoading={props.dishesLoading}
              errMess={props.dishesErrMess}
            />
          </div>
        </div>
      </div>
    )
  );
}

Answer 2

问题是，在您的主要组件中，您将正确地将盘装道具传递给Home组件。您需要通过名称为isLoading而不是dishesLoading的道具访问它

const HomePage = () => {
      return (
        <Home
          dish={this.props.dishes.dishes.filter(dish => dish.featured)[0]}
          dishesLoading={this.props.dishes.isLoading}
          dishesErrMess={this.props.dishes.errMess}
        />
      );
};

Working sandbox

此外，在RenderCard组件中，由于数据item.name最初位于undefined中，因此您不应在加载数据之前访问console.log(item.name)

与Redux反应，组件无法识别从父级传递的属性

2 个答案: