Question

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'}]

，并且在另一个组件中有一个方法来创建映射每组条件的radioGroup，从而允许用户更改How to set defaultValue of a radioGroup from a nested Array object in React state?中讨论的费率值，该值适用于硬编码数组，但不适用于产生“ TypeError： “ values.formRating.map不是函数”，在显示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>

    ))
  };

感谢您的帮助。

Answer 1

这是因为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() }
  </>

}

Answer 2

您如何将“值”属性传递给createRadioGroup？好像您需要传递它（请参见下面的代码片段），然后尝试控制台记录整个props对象，以确保您确实收到了它。

createRadioGroups = (props)=>{
    const {values} = this.props;

检查之后，再考虑何时调用setRadio？您确定状态已更新，以便在调用createRadioGroup时可用。如果可能尚未更新，则可以尝试使用期望数据的“形状”初始化状态，以便不包含任何数据进行渲染，然后在状态更新后重新渲染。看起来像这样：

this.state = {
  formValues= 
  [
    {
      condId :'',
      rate:'', 
      condition:''
    }
  ];

Answer 3

尝试一下

   return(
    <>
    this.props.values&&this.props.values.formRating.map()
    </>
   )

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

3 个答案: