javascript - 如何在React状态下访问JSON对象？

setRadio= (id) => {
  const {formRating} = this.state;
  fetch(`http://localhost:3030/getLessonCondsDB?formId=${id}`)
  .then(response => response.json())
  .then(response=>{
                  this.setState({formRating:response.data})
                  console.log(response.data);})
  .catch(err=>console.error(err))

}

上面的方法将在控制台中显示为[RowDataPacket {condId: 'C2.1(a)', rate: 3, condition: 'Random text here' }, RowDataPacket {condId: 'C2.2(b)',rate: 3,condition: 'more random text' }]的JSON对象分配给在开发工具中显示的状态对象formRating，如下所示

formRating: Array
  > 0: Object
     condId: 'C2.1(a)'
     rate: '3',
     condition: 'Random text here'
  > 1: Object
     condId: 'C2.2(b)'
     rate: '3',
     condition: 'more random text'

任何对console.log（formRating）的尝试只会在控制台上打印并空行。

之前没有从服务器获取数据，而是将数据硬编码为如下所示的数组

const formValues= [{condId :'C2.1(a)',rate:'3', condition:'Random text here'},{condId :'C2.2(b)',rate:'3', condition:'more random text'}]

并在另一个组件中有一个方法来创建映射每组条件的radioGroups，允许用户更改速率值，如How to set defaultValue of a radioGroup from a nested Array object in React state?中所述，该值适用于硬编码数组，但不适用于生成“ TypeError：values.formRating.map”的JSON数组“不是功能”，在显示radioGroup的组件中具有以下功能，允许用户自定义“比率”值。

createRadioGroups = ()=>{
    const {values} = this.props;
    console.log(values.formRating);
    return(values.formRating.map(
      item =>
      <Grid container>
            <Grid item xs={2} style={{marginTop:20, marginRight:0}}>{item.condId} </Grid>

            <Grid item xs={6} style={{marginTop:20}}>{item.condition} </Grid>
              <Grid item xs={4} style={{marginTop:10}}>
                <RadioGroup defaultValue={item.rate} name={item.condId}  onChange={this.changeButton(item.condId)} style={{display: 'flex', flexDirection: 'row'}}>
                  <FormControlLabel value="3" control={<Radio color="primary" />} label=' ' labelPlacement="top"/>
                  <FormControlLabel value="2" control={<Radio color="primary" />}label=' ' labelPlacement="top"/>
                  <FormControlLabel value="1" control={<Radio color="primary" />}label=' ' labelPlacement="top"/>
                  <FormControlLabel value="N/A" control={<Radio color="primary" />}label=' ' labelPlacement="top"/>
                </RadioGroup>
              </Grid>

          </Grid>

    ))
  };

任何帮助表示赞赏。

最佳答案

这是因为setRadio()中的获取操作是异步的，因此任何依赖于状态或setRadio()中的值的操作都将失败。这就是为什么在createRadioGroups()返回并完成之前调用setRadio()会导致产生不确定值的原因。

我不确定您的组件的结构如何，但是您应该在.then()块中处理所有后续操作，

setRadio= (id) => {
  const {formRating} = this.state;
  fetch(`http://localhost:3030/getLessonCondsDB?formId=${id}`)
  .then(response => response.json())
  .then(response=>{
    this.setState({formRating:response.data})
    console.log(response.data);
    // do the rest here
  })
  .catch(err=>console.error(err))
}

或者，如果在模板上处理了渲染，则仅应在填充formRating之后有条件地调用该方法。

render() {

  const { formRating } = this.state;

  return <>
    { formRating && formRating.length && this.createRadioGroups() }
  </>

}

或者，如果createRadioGroups()在另一个子组件上，

render() {

  const { values } = this.props;

  return <>
    { values && values.formRating && values.formRating.length && this.createRadioGroups() }
  </>

}