Question

我有一个疯狂的问题。这是应用程序的结构。 RestaurantContainer呈现了RestaurantInput，它具有一种获取餐厅名称的形式。在Restaurant列表组件中使用Restaurants组件渲染餐厅。这3个组件的代码在本文的底部。

我的问题是，当商店中有任何餐厅时，我会收到此错误：

（注意：无论我是通过调度操作使用表单添加餐厅，还是如果我给RestaurantContainer包含餐厅的开始状态，都会发生此错误行为-请参见{{1 }}）

mapStateToProps

如果我将TypeError: Cannot read property 'map' of undefined Restaurants.render src/components/restaurants/Restaurants.js:12 9 | return ( 10 | <ul> 11 | Your Restaurants: > 12 | {this.props.restaurants.map(restaurant => { 13 | return <Restaurant key={restaurant.id} restaurant={restaurant} />; 14 | // <li key={restaurant.id}>{restaurant.name}</li> 15 | })}组件调用换成带注释的<Restaurant>，它将正常工作。

因此，我试图弄清楚为什么会发生这种情况，而这正是它发疯的地方。您将在li和其他位置的渲染功能中看到logger语句。这是当我加载应用程序时在控制台中发生的情况，其中一家餐厅已经处于状态：

Restaurants

您会看到，mapStateToProps RestaurantsContainer props: {restaurants: Array(1), addRestaurant: ƒ, deleteRestaurant: ƒ} Restaurants this Restaurants {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …} Restaurants props {restaurants: Array(1)} Restaurants this Restaurants {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …} Restaurants props {restaurant: {…}} Restaurants this Restaurants {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …} Restaurants props {restaurant: {…}}按照预期被渲染了一次，但是RestaurantsContainer组件以某些非常奇怪的方式被渲染了三次。

您第一次希望它们的Restaurants和this都适用于props。（Restaurants）

但是，第二次和第三次{restaurants: Array(1)}是this的结果，而 Restaurants是您在props中的期望（ （Restaurant）

最后，我会指出，在任何列出的情况下，{restaurant: {…}}内的断点都不会受到攻击。另外，我尝试注释掉Restaurant的{{1}}的整个返回值，没有任何改善。

这是组件的代码：

Restaurant

render

// RestaurantsContainer

import React, { Component } from "react";
import RestaurantInput from "../components/restaurants/RestaurantInput";
import Restaurants from "../components/restaurants/Restaurants";
import { connect } from "react-redux";

class RestaurantsContainer extends Component {
  render() {
    console.log("RestaurantContainer props:", this.props);

    return (
      <div>
        <RestaurantInput
          handleSubmit={this.handleSubmit}
          addRestaurant={this.props.addRestaurant}
        />
        <Restaurants restaurants={this.props.restaurants} />
      </div>
    );
  }
}

const mapStateToProps = state => {
  console.log("mapStateToProps");
  return {
    restaurants: state.restaurants
    // restaurants: [{id: 1, name: "burger king"}]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addRestaurant: name => dispatch({ type: "ADD_RESTAURANT", name: name }),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(RestaurantsContainer);

Redux组件被错误地多次渲染/调用？

0 个答案: