如何在JSX中编写嵌套循环以减少重复代码?

塔米

以下代码输出两个单独的表单部分。一切正常,但是我有两个相似的for()循环和两个相似的map()函数。我想学习如何使用for()循环和map()函数编写嵌套脚本,以便可以向state.program对象添加更多属性,并且表单将自动更新,而无需添加其他for()或地图()。

基本上,我试图遍历对象,创建数组以映射到我的组件道具。我在想这是错误的方式吗?

我希望对我的问题的描述是有意义的。这是React组件...

class CreateProgram extends Component {
  state = {
    program: {
      description: {
        title: {
          label: 'Program title',
          value: ''
        },
        category: {
          label: 'Program category',
          value: ''
        }
      },
      location: {
        location_title: {
          label: 'location title',
          value: ''
        },
        location_coor: {
          label: 'location coordinates',
          value: null
        }
      }
    }
  };
  render() {
    return <Program items={this.state.program} />;
  }
}
export default CreateProgram;

class Program extends Component {
  render() {
    const { items } = this.props;
    const descriptionArray = [];
    const locationArray = [];

    for (let key in items.description) {
      descriptionArray.push({
        id: key,
        value: items.description[key]
      });
    }
    for (let key in items.location) {
      locationArray.push({
        id: key,
        value: items.location[key]
      });
    }

    return (
      <>
        <div className="form-section">
          {descriptionArray.map(element => (
            <Input
              label={element.value.label}
              value={element.value.value}
              changed={event =>
                changed(event, element.id, 'program', 'description')
              }
            />
          ))}
        </div>

        <div className="form-section">
          {locationArray.map(element => (
            <Input
              label={element.value.label}
              value={element.value.value}
              changed={event =>
                changed(event, element.id, 'program', 'location')
              }
            />
          ))}
        </div>
      </>
    );
  }
}

export default Program;
阿尔瓦罗

您可以简化父状态:

state = {
    description: {
        title: {
            label: "Program title",
            value: ""
        },
        category: {
            label: "Program category",
            value: ""
        }
    },
    location: {
        location_title: {
            label: "location title",
            value: ""
        },
        location_coor: {
            label: "location coordinates",
            value: null
        }
    }
};

然后将它们分别传递给子组件:

render() {
    return (
        <Program
            description={this.state.description}
            location={this.state.location}
        />
    );
};

并在子组件中使用Object.entries返回的数组来映射每个元素:

Object.entries(this.props.description).map(([key, value]) => (
    <Input
        key={key}
        label={value.label}
        value={value.value}
        changed={event => changed(event, key, "program", "description")}
    />
));
Object.entries(this.props.location).map(([key, value]) => (
    <Input
        key={key}
        label={value.label}
        value={value.value}
        changed={event => changed(event, key, "program", "location")}
    />
));

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章