Реагируйте с Redux, компонент не может распознать свойство, переданное от родителя

Question

Пожалуйста, просмотрите приведенный ниже код, если он недостаточно ясен. Вот код codesandbox для расширенной версии моей проблемы,

, поэтому я передаю некоторые свойства от родителядочерний комп., родитель - мой <Main /> комп., который обернут в <Provider> комп.чтобы позволить ему получить доступ к магазину.Теперь у ребенка есть функция, которая отображает информацию на основе переданных реквизитов от родителя, вот мой дочерний комп.код

//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 (..) msg, успешно записывает нужную информацию в консоль, что означаетреквизиты передаются и доходят до <RenderCard /> comp.Однако вместо того, чтобы отображать его в окне, я получаю TypeError Cannot прочитать имя свойства undefined.

, пожалуйста, оставьте комментарий ниже, если понадобятся какие-либо дополнительные части кода.

заранее спасибо.

Answer 1

Проблема в том, что в вашем главном компоненте вы неправильно передаете реквизит посуды с загрузкой в ​​компонент 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}
        />
      );
};

Рабочая песочница

Также в компоненте RenderCard вы не должны обращаться к item.name до загрузки данных, поскольку изначально undefined в console.log(item.name)

Answer 2

Проблема в том, что вы не возвращаете ни один компонент в методе визуализации Main компонента. Вместо этого вы объявили метод HomePage.

См. Код ниже. Это должно работать.

UPDATE:

Вот песочница, которая работает: 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>
    )
  );
}