Question

我有一个带有动态输入字段的表单，将这些详细信息存储在Firebase中，例如usr_PilotName-1，usr_PilotName-2等。现在我想显示这些详细信息，但无法获得所需的结果。

任何帮助都感激

   render() {
        const { singleuser, classes } = this.props;
        const SPinputsPilot= [];
        if (singleuser) {

            if (singleuser.sp_Role == "Service Provider") {
                for (let i = 0; i < singleuser.sp_NumberofDronePilots; i++) {
                    SPinputsPilot.push(
                        <div>
                            <GridItem xs={12} sm={12} md={6}>
                            <p> {singleuser.usr_PilotName-i} </p>
                            </GridItem>
                            <GridItem xs={12} sm={12} md={12}>
                            <p> {singleuser.usr_PilotLicesnseNumber-'${i}'} </p>
                            </GridItem>
                        </div>)
                }

            }

            return (
                <div>....</div>

Answer 1

据我了解，单用户是一个对象，您想显示飞行员详细信息。使用这样的forloop来填充用于渲染组件的数组是React本身的反模式。

render(){
  const { singleuser, classes } = this.props;
  const SPinputsEquipment = [];
   return singleuser ? (
      Array.from({ length: singleuser.sp_NumberofDronePilots}).map((pilot, i) => (
       <div>
         <GridItem xs={12} sm={12} md={6}>
         <p> {`${singleuser.usr_PilotName}-${i}`} </p>
         </GridItem>
         <GridItem xs={12} sm={12} md={12}>
           <p> {`${singleuser.usr_PilotLicesnseNumber}-${i}`} </p>
         </GridItem>
       </div>))
   ) : 
   <div> ==== No single User ==== </div>
}

选中此working code

遍历并获得价值反应

1 个答案: