Question

我有一个反应组件，它提取用户数据，并且应该能够显示JSON对象中的一个值。但是，我收到以下Uncaught TypeError: this.state.reasons.map is not a function错误。我相信它是因为它期待一个数组与一个对象，但不太确定如何根据需要检查或转换。它应该能够映射对象并呈现subscription.current_period_end

的值

这是JSON对象：

{
  "displayName": "username",
  "email": "user@email.com",
  "entitled": true,
  "id": "23456789",
  "subscription": {
    "canceled_at": 1508519952,
    "current_period_end": 1524765490,
    "is_premium": true,
    "is_renewing": false,
    "plan_type": "Annual",
    "saved": true,
    "status": "Active"
  },
  "country": "us",
  "language": "en"
}

反应组件

class CancelConfirm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      reasons: []
    }
    this.processData = this.processData.bind(this)
  }

  componentDidMount() {
    this.fetchContent(this.processData)
  }


  fetchContent(cb) {
    superagent
      .get('/api/user')
      .then(cb)
  }


  processData(data) {
    this.setState({
      reasons: data.body
    })
  }

  render(props) {
    const content = this.props.config.contentStrings
    const reason = this.state.reasons.map((reason, i) => {
      return ( 
        <p key={i}>{reason.subscription.current_period_end}</p>
        )
    })
    console.log(reason)

    return ( 
    <div className = 'confirm' >
      <p className = 'confirm-subpara' >{reason}</p> 
    </div>
    )
  }
}

export default CancelConfirm

Answer 1

你的this.state.reasons是来自JSON的响应对象，对象没有map函数，它只适用于new Array()等迭代器值，如果你试图显示你只是做的理由

目前我不知道为什么你在没有数组数组数据的情况下尝试迭代对象，也许我的问题出错了所以请说明为什么你甚至做了map而不是简单的对象引用。 / p>

var API_RESPONSE = {
  "body": {
    "displayName": "username",
    "email": "user@email.com",
    "entitled": true,
    "id": "23456789",
    "subscription": {
      "canceled_at": 1508519952,
      "current_period_end": 1524765490,
      "is_premium": true,
      "is_renewing": false,
      "plan_type": "Annual",
      "saved": true,
      "status": "Active"
    },
    "country": "us",
    "language": "en"
  }
}

class CancelConfirm extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      reasons: false
    }
    
    this.processData = this.processData.bind(this)
  }

  componentDidMount() {
    this.fetchContent(this.processData)
  }


  fetchContent(cb) {
    setTimeout(() => {
      cb(API_RESPONSE)
    }, 2000)

  }


  processData(data) {
    this.setState({
      reasons: data.body
    })
  }

  render(props) {
    if (!this.state.reasons) return (<i>Loading ....</i>)

    const reason = <p>{this.state.reasons.subscription.current_period_end}</p>

    return ( 
    <div className = 'confirm' >
      <p className = 'confirm-subpara' >{reason}</p> 
    </div>
    )
  }
}

ReactDOM.render(<CancelConfirm />, document.getElementById('react'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

Answer 2

你不能map()超过Object。因此，做这样的事情会更好：

render(props) {
  const content = this.props.config.contentStrings
  const { reasons } = this.state;
  const keys = Object.keys(reasons);

  return (
    keys.map((k, i) => {
      return <p key={i}>{reasons[k].subscription.current_period_end}</p>
    })
  )
}

未捕获的TypeError - 在React中发出json对象的映射

2 个答案: