需要帮助重构代码以解决 eslint 无循环警告

Question

两个问题是有两个组件和一个小部件都相互依赖。

我一直在试图弄清楚如何重构代码以删除此警告，但是当我尝试切换组件时，我收到有关无法渲染组件的道具警告：

Cannot create Form element because property inputs is missing in props [1] but
exists in Props [2].

index.js这是表单的主要组件。

export type Props = {
  action?: string,
  inputs: any[],
  noFormTag?: boolean, // Can't have nested forms i.e. quick create
  noFormTagSubmit?: Function,
  noFormTagRef?: any,
};


  displayQuickCreate = (input: QuickCreateProps) => {
    const {
      id, name, label, placeholder, checkboxes, formProps,
    } = input;
    if (!checkboxes || !name || !label) return null;
    return (
      <div key={id}>
        <QuickCreate
          id={id}
          name={name}
          label={label}
          placeholder={placeholder}
          checkboxes={checkboxes}
          formProps={formProps}
        />
      </div>
    );
  };

DynamicForm需要这些道具和 index.js

export type Props = {
  nameValue?: string,
  formProps: any,
  onCreate: Function,
};


<Form
        inputs={formProps.inputs}
        noFormTag={formProps.noFormTag}
        noFormTagSubmit={this.onSubmit}
        noFormTagRef={(element) => {
          this.myRef = element;
        }}

然后最后：

QuickCreate 是一个小部件

export type Props = {
  checkboxes: Checkbox[],
  placeholder?: string,
  name: string,
  id: string,
  label: string,
  formProps: any,
};

<DynamicForm
        nameValue={nameValue}
        formProps={formProps}
        onCreate={this.onCreate}
      />

您不能在 QuickCreate 上用 DynamicForm 替换 Form，因为 DynamicForm 有 axios 并且正在将信息发送到 Internet。

所以我的下一步是尝试让 Form 在 QuickCreate 中工作，但即使我正在查看道具，仍然存在道具错误。

  axios.post(formProps.action, this.getParams()).then((response: any) => {
      const { onCreate } = this.props;
      if (onCreate) {
        onCreate(response);
      }
    });

我的下一步是尝试将 QuickCreate 直接导入 DynamicForm

由于 QuickCreate 正在调用 DynamicForm 它应该继续工作，因为它反向工作？

现在 QuickCreate 需要 DynamicForm

谢谢你的帮助！

Answer 1

以下通过：
npm 皮棉
npm测试
npm 测试：circleci

我将index.js表单下的组件切换为复选框：

displayQuickCreate = (input: any) => {
    const {
      id, name, label, placeholder, checkboxes, formProps,
    } = input;
    if (!checkboxes || !name || !label) return null;
    return (
      <div key={id}>
        <Checkbox
          id={id}
          name={name}
          label={label}
          placeholder={placeholder}
          checkboxes={checkboxes}
          formProps={formProps}
        />
      </div>
    );
  };