Question

这是我第一次在没有JSX的情况下使用React，所以我可能犯了一个明显的错误，但是我似乎无法弄清楚为什么我的组件没有更新。

我在componentDidMount中发出了xhr请求，并尝试将this.state.isLoading设置为false。 xhr请求完成后，这应该会导致删除加载消息。

这是我的代码：

import React from 'react'
import request from 'superagent'

export class SurveyList extends React.Component {
  constructor () {
    super()
    this.state = {
      error: false,
      surveys: [],
      isLoading: true
    }
  }

  componentDidMount () {
    request
      .post('/surveys')
      .set('accept', 'json')
      .end((err, res) => {
        if (err) this.state.error = err
        this.state.isLoading = false
      })
  }

  render () {
    const items = this.state.surveys.map(survey => React.createElement('li', survey))
    const loading = React.createElement('p', null, 'Loading ...')
    const list = React.createElement('ul', null, items)
    return this.state.isLoading ? loading : list
  }
}

我这样渲染：

const surveyListElem = document.getElementById('survey-list')
if (surveyListElem) {
  ReactDOM.render(
    React.createElement(SurveyList),
    surveyListElem
  )
}

Answer 1

直接设置状态将无效。您需要使用setState()来触发重新渲染。

状态更改时组件未更新

1 个答案: