javascript - 获取数据后设置状态的 react 问题

Question

我正在创建一个表单，我想在初始加载时加载数据。

我已经设置了 Mount 来调用我的函数 fetchClaims。我收到结果，并且可以控制台记录它。我不能做的是用它更新我的状态，以便我可以在我的表单中使用它。

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

onInit = props =>
  props
    .fetchClaims()
    .then(results => console.log('results = ' + JSON.stringify(results)))
    .then(claims => this.setState({ results }))
    .then(results =>
      console.log('results state = ' + JSON.stringify(this.state)),
    );

结果数据如下所示

results = {
  type: 'CLAIMS_FETCHED',
  claims: [
    {
      _id: '5b0d5b7f035a00f06003e6b8',
      claimID: '123456',
      claimDate: '2018-05-14T00:00:00.000Z',
      carrier: 'BCBS NJ',
    },
  ],
};

状态看起来像

state = {
  data: { email: '' },
  loading: false,
  errors: {},
  fromdate: '',
  todate: '',
  claims: {},
  results: {},
};

我想将 Claims 数组填充到 state 中的声明中，然后对其进行映射。

Answer 1

尝试在第一个控制台日志之后返回值，并在设置状态时修复参数名称。

onInit = props => props.fetchClaims()
    .then(results => {
        console.log("results = " + JSON.stringify(results));
        return results;
    })
    .then(results => this.setState({ claims: results.claims }))
    .then(() => console.log("results state = " + JSON.stringify(this.state)));