ReactJs：TypeError：无法读取未定义的属性“ ItemsServices”

114

坦莫·萨卡（Tanmoy Sarkar）：

在这里，我遇到了AliceCarousel的一些问题，无法映射我的响应以在画廊中显示其图像。我想显示每个画廊的图像类型。

这里有什么帮助或建议吗？谢谢。

// Js

class KitchenService extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
      responsive: { 1024: { items: 3 } },
      galleryItems: this.galleryItems(),
      services : this.props.resume,
      ...props,
      ItemsServices:[]
    }
  }

  static propTypes = {
    getService: PropTypes.func.isRequired,
    resume: PropTypes.object.isRequired,
    auth: PropTypes.object.isRequired,
    loading: PropTypes.object.isRequired
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if(nextProps.resume !== this.props.resume){
      var services  = this.props.resume.services;
      this.setState({
        ItemsServices: services
      })
    }
  }

  componentDidMount() {
    this.props.getService();  
  }

  slideTo = (i) => this.setState({ currentIndex: i })

  onSlideChanged = (e) => this.setState({ currentIndex: e.item })

galleryItems = () => {
    return this.state.ItemsServices.map((brand, i) => {
      var checkImage = brand.length !== 0 && brand.service_name === "Office";

      console.log(checkImage, "checkImage")
      return (
        <div key={`key-${i}`}  className="card-img-top"><img src={brand.service_image_url} /></div>
      )
    })
  };
 
  render() {
    const { responsive, currentIndex } = this.state
    const items = this.galleryItems();
    return(
        <div>
          <Grid className ="col-12 service-kitchen-gallery-grid" >
            <div className="service-gallery-headline">
                Kitchen
            </div>
              
            <AliceCarousel
              dotsDisabled={true}
              buttonsDisabled={true}
              items={items}
              responsive={responsive}
              slideToIndex={currentIndex}
              onSlideChanged={this.onSlideChanged}
              />
          </Grid>
        </div>
    )
  }
}

const mapStateToProps = (state) => ({
  resume: state.resume,
});

export default connect(mapStateToProps, {getService }) (KitchenService);

//错误

TypeError: Cannot read property 'ItemsServices' of undefined

服务API响应

（console.log（服务））

[
  {
    _id: "5f1971da18ba2b04704d65c2",
    service_name: "Other",
    service_image_url:
      "https://res.cloudinary.com/tammycloudinary/image/upload/v1595503076/nou0knjbtkujxwjktang.png",
    date: "2020-07-23T11:17:46.928Z",
    __v: 0,
  },
  {
    _id: "5f1971b218ba2b04704d65c1",
    service_name: "Bedroom",
    service_image_url:
      "https://res.cloudinary.com/tammycloudinary/image/upload/v1595503036/kfiteeilh4doytio6gs8.png",
    date: "2020-07-23T11:17:06.742Z",
    __v: 0,
  }
];

布莱恩·汤普森（Brian Thompson）：

问题不是const items = this.galleryItems();我最初想的那样。它来自构造函数。

您正在尝试使用状态对象来构建初始状态对象。这显然是行不通的。

  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
      responsive: { 1024: { items: 3 } },
      galleryItems: this.galleryItems(), // <-- Here is the problem
      services : this.props.resume,
      ...props,
      ItemsServices:[]
    }
  }

您尝试state通过调用进行初始化this.galleryItems。但是该函数依赖于this.state已经被声明。由于尚未创建（但正在声明中），因此undefined会出现此错误。

我认为根本不gallaryItems属于国家。无论如何，通常不建议以状态存储JSX。而是只使用您中的函数render来计算每个渲染所需的JSX。

另一个注意事项：不要this.props在构造函数中使用。而是使用props传递给构造函数的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。