Question

''''''''''''''''''''''''''东西''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''m'm''''''''''''''''''''m'm试图映射我存储在一个数组中的一些数据（下面的截图），但我似乎无法访问它，因为它是异步加载的）。我怎么能等待数据？有没有办法在渲染函数中做到这一点？

 render() {
         
        return (
          {this.state.serials.map((number) => {
    return number.s && number.s.length? 
    (
        <h2 > {number.s[0].a}</h2>
  ) : null
})}
        )
    }

这是我获取数据的 componentDidMount()：

componentDidMount() 
        const uid = this.state.user.uid;
        const gatewayRef = db.ref(uid + '/gateways');
        gatewayRef.on('value', (gateways_nums) => {
            const serialsArr = [];
          gateways_nums.forEach((gateway_num) => {
            const serialRef = db.ref('gateways/' + gateway_num.val()['gateway'])
            const last_temps =[];
            serialRef.on('value', (serials)=>{ 
                const ser = []
                serials.forEach((serial)=>{
                    ser.push(serial.val()['serial'])
                })
                last_temps.push({a: gateway_num.val()['gateway'], b: ser})
            })
            serialsArr.push({s:last_temps})
          });
          this.setState({serials:serialsArr})
        });
      }

我真的很感激任何帮助！

Answer 1

试试这个：

render() {
  if(!this.state.serials) {
    // Ideally you should draw some loading spinner here
    // to indicate that data is not ready yet. But for a quick
    // solution you can just draw nothing
    return null
  }

  // Also "return ({ this.state.serials.map() })" is not valid syntax
  // you either need to return just an array without using braces, or
  // use some JSX tag and put braces inside of it
  return (
    <div>
        {this.state.serials.map(serial => ...)}
    </div>
  )
}

说到大括号无效的语法，你也可以这样做

return this.state.serials.map(serial => ...)

或者（更好）

return (
  <>
    {this.state.serials.map(serial => ...)}
  </>
)

如果您不想在数据周围添加额外的 div

Answer 2

我设法通过稍微更改算法使其工作。使用此代码无需等待数据：

<Form onFinish={formik.handleSubmit}>
      <FormLabel>Select City</FormLabel>
      <Form.Item>
        <Select
          name="city"
          placeholder="Please select a country"
          onChange={(value) => formik.setFieldValue("city", value)}
        >
          <Select.Option value="mumbai">Mumbai</Select.Option>
          <Select.Option value="bengaluru">Bengaluru</Select.Option>
          <Select.Option value="delhi">Delhi</Select.Option>
          <Select.Option value="hyderabad">Hyderabad</Select.Option>
          <Select.Option value="chennai">Chennai</Select.Option>
        </Select>
      </Form.Item>
      <FormLabel>Check-In-Date</FormLabel>
       <Form.Item>
         <DatePicker
           name="checkIn"
           format={dateFormat}
           onChange={(value) => formik.setFieldValue("checkIn", value)}
           />
      </Form.Item>
      <SubmitButton htmlType="submit">Book Now</SubmitButton>
    </Form>

如何在映射数组之前等待设置状态？

2 个答案: