TypeError：this.state.details.map不是函数

问题描述 投票：0回答：1

代码中没有错误，当我填充对象时没有问题，但在进行映射和其他操作时，它显示如下。此外，我已经安慰了这个组件，我已经看到它安慰了2次。为什么它安慰2次。我完全糊涂了。

代码如下

代码:-(横幅）

export default class Banner extends Component {
  constructor(props){
    super(props)
    this.state={
      passedId: this.props.data.id,
      details:'',
    }
  }

  componentDidMount(){
    let data={
      id:this.state.passedId
    }
    axios.post('/getoneartist' ,data)
    .then(res=>{
      this.setState({details:res.data})
      this.forceUpdate()
    })
  }
  render() {
    console.log("hai"+this.state.details)
    return (
      <Container>
      <a href="#" onClick={this.props.artist}>  
         <Row>
          <Row><img src={process.env.PUBLIC_URL +'/assets/images/+this.state.details.map(item=>item.dp)} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/'+this.state.eventdetails.map(item=>item.dp)}  className="banner-image-size-2"/></Row>
          <Row><img src={grad_banner}  className="grad-image-size-2"/></Row>
          <Col lg="4" className="round-image-padding-2"><img src={process.env.PUBLIC_URL +'/assets/images/logo.png'} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/logo.png'}  className="round-image-size-2"/></Col>
          <Col lg="4" className="items-padding-2">
          <Row className="text-items-2">DJ SHERAM</Row>
          <Row className="text-items-2">Mumbai</Row>
          <Row className="text-items-2">Bollywood</Row>
          </Col>        
      </Row></a><br /><br /><br /><br /><br />
    </Container>
     );
    }
}

代码:-(布局）

class SingleLayout extends Component {
  constructor(props){
    super(props);
    this.state= {details:this.props.match.params}
  }

  render() {
    return (

      <div>
        <Row>

            <Col xl="4" lg="4"><Row><Col lg='1'></Col><span>1 Artist playing</span></Row><br /><RelatedArtist data={this.state.eventdetails}/></Col>
          </Row>  
        <Row><AdBanner/></Row>
      </div>
    );
  }
}

export default SingleEventsLayout;

代码:-(滑动）

export default class Sliders extends Component {
  constructor(props){
    super(props)
    this.state={
      Array:[],
    }
  }

  componentDidMount(){
    axios.get('/getalllist')
    .then(res=>{
      this.state.Array = res.data
      this.forceUpdate()
    })
  }
  render() {
    console.log(this.state.Array)
    const settings = {
      className: "center",
      centerMode: true,
      infinite: true,
      centerPadding: "24%",
      slidesToShow: 1,
      speed: 5000,
      width:"851px",
      infinite: true,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 7000,
      nextArrow:false
    };
    return (
      <div className="r-slider-main-section">
        <Slider {...settings}>
        {this.state.Array.map(item=>
          <div className="r-slider-spacer">
          <Link to={{pathname:"/events/"+(item.city.city_name)+"/"+(item._id)  ,state: { Id: item._id}}}>
            <Card style={{borderRadius:"17px"}}>
            <img src={process.env.PUBLIC_URL +'/assets/images/'+item.banner} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/logo.png'} className="r-test1" />
            <img src={image1} className="r-test2"></img>
            <img src={calender} className="r-calender-place"></img>
            <text className="r-text-month">DEC</text>
            <text className="r-text-date">{item.date_time_start.substring(8, 10)}</text>
            <text className="r-text-event-name">@{item.name}</text>
            <text className="r-text-event-detail">{item.type} featuring {item.name}</text>
            <div className="r-rectangle-icon"><div class="r-rectangle"><div className="r-rectangle-text">{item.amount}</div></div></div>
          </Card></Link>
        </div>)}
        </Slider>
      </div>
    );
  }
}

在这里，我将道具从滑块传递到布局然后传递到下一个，但我不知道为什么它会像这样显示。我已经在componentDidMount中给出了axios调用但仍然发生了。

提前致谢

reactjs react-router-dom react-props
1个回答
0
投票

您在代码中犯了很多错误。

  1. 永远不要直接改变国家
  2. 你正在做字符串上的地图
  3. 您没有检查数据是否包含对象数组，然后才进行映射

你可以试试下面更正的代码。

export default class Banner extends Component {
  constructor(props){
    super(props)
    this.state={
      passedId: this.props.data.id,
      details:[],
    }
  }

  componentDidMount(){
    let data={
      id:this.state.passedId
    }
    axios.post('/getoneartist' ,data)
    .then(res=>{
      this.setState({details:res.data})
      this.forceUpdate()
    })
  }
  render() {
    console.log("hai"+this.state.details)
    return (
      <Container>
      <a href="#" onClick={this.props.artist}>  
         {this.state.details && (<Row>
          <Row><img src={process.env.PUBLIC_URL +'/assets/images/+this.state.details.map(item=>item.dp)} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/'+this.state.details.map(item=>item.dp)}  className="banner-image-size-2"/></Row>
          <Row><img src={grad_banner}  className="grad-image-size-2"/></Row>
          <Col lg="4" className="round-image-padding-2"><img src={process.env.PUBLIC_URL +'/assets/images/logo.png'} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/logo.png'}  className="round-image-size-2"/></Col>
          <Col lg="4" className="items-padding-2">
          <Row className="text-items-2">DJ SHERAM</Row>
          <Row className="text-items-2">Mumbai</Row>
          <Row className="text-items-2">Bollywood</Row>
          </Col>        
      </Row>)}</a><br /><br /><br /><br /><br />
    </Container>
     );
    }
}

代码：幻灯片：

export default class Sliders extends Component {
  constructor(props){
    super(props)
    this.state={
      Array:[],
    }
  }

  componentDidMount(){
    axios.get('/getalllist')
    .then(res=>{
      this.setState({ Array: res.data });
    })
  }
  render() {
    console.log(this.state.Array)
    const settings = {
      className: "center",
      centerMode: true,
      infinite: true,
      centerPadding: "24%",
      slidesToShow: 1,
      speed: 5000,
      width:"851px",
      infinite: true,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 7000,
      nextArrow:false
    };
    return (
      <div className="r-slider-main-section">
        <Slider {...settings}>
        {this.state.Array && this.state.Array.map(item=>
          <div className="r-slider-spacer">
          <Link to={{pathname:"/events/"+(item.city.city_name)+"/"+(item._id)  ,state: { Id: item._id}}}>
            <Card style={{borderRadius:"17px"}}>
            <img src={process.env.PUBLIC_URL +'/assets/images/'+item.banner} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/logo.png'} className="r-test1" />
            <img src={image1} className="r-test2"></img>
            <img src={calender} className="r-calender-place"></img>
            <text className="r-text-month">DEC</text>
            <text className="r-text-date">{item.date_time_start.substring(8, 10)}</text>
            <text className="r-text-event-name">@{item.name}</text>
            <text className="r-text-event-detail">{item.type} featuring {item.name}</text>
            <div className="r-rectangle-icon"><div class="r-rectangle"><div className="r-rectangle-text">{item.amount}</div></div></div>
          </Card></Link>
        </div>)}
        </Slider>
      </div>
    );
  }
}

代码 - 布局

class SingleLayout extends Component {
  constructor(props){
    super(props);
    this.state= {details:this.props.match.params}
  }

  render() {
    return (

      <div>
        <Row>

            <Col xl="4" lg="4"><Row><Col lg='1'></Col><span>1 Artist playing</span></Row><br /><RelatedArtist data={this.state.details}/></Col>
          </Row>  
        <Row><AdBanner/></Row>
      </div>
    );
  }
}

export default SingleEventsLayout;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.