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

Question

在这里，AliceCarousel出现了一些问题，无法映射我的回复以在图库中显示其图像。 我想显示每个画廊的图像类型。

我通常会关注SO example。

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

// 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,
  }
];

Answer 1

问题并非像我最初想象的那样来自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。

Answer 2

Y0u可以使用SDK.unregister("vsts-extensions-Control-ClosedInVersion.ms.vss-work-web.work-item-form"); 来解决此问题。

filter