Question

我正在为我的应用程序创建表单。我面临的问题是，每当我单击添加并生成另一行输入时，都会出现“比上一次渲染期间渲染更多的挂钩”错误。

我有一个带有复选框的“收益”输入。当用户检查它时，我想使用KPI渲染另外2个输入（在同一行中）。如果只有一行，则挂钩可以很好地工作。当我添加另一行时，会发生错误。

const renderBenefitFields = (benefit, index, fields) => {
  const [hidden, setHidden] = useState(false);
  return (
    <div key={index}>
      <InputGroup>
        <Input
          name={`${benefit}.projectBenefitData`}
          type="text"
          component={renderField}
          label="Benefit of the project"
        />
        <InputGroupAddon addonType="append">
          <InputGroupText>
            <Input
              addon
              type="checkbox"
              aria-label="Mesurable benefit?"
              onChange={() => setHidden(!hidden)}
            />
          </InputGroupText>
          <InputGroupText>Benefit mesurable </InputGroupText>
        </InputGroupAddon>
        <Trash
          className="align-middle"
          size={25}
          onClick={() => fields.remove(index)}
        />
        Show KPI inputs? {hidden === false ? "false" : "true"}
      </InputGroup>
    </div>
  );
};

const renderBenefits = ({ fields }) => (
  <div>
    {fields.map(renderBenefitFields)}
    <PlusCircle
      className="align-baseline"
      size={24}
      onClick={() => fields.push({})}
    />
  </div>
);

完美的解决方案是：当用户选中该框时，react将显示另外两个输入。

Answer 1

如Ross Hunter所述，
1.您应大写您的部分，即RenderBenefitFields
2.在onClick={() => fields.push({})}

中，状态/属性没有突变

此外，您应该按以下方式在renderBenefits中调用您的RenderBenefitFields：

{fields.map((props, index) => <RenderBenefitFields key={index} {...props} />)}

P.S。您可以根据情况使用唯一键而不是索引。

Answer 2

用户定义组件的名称必须大写。
PlusCircle中的onClick回调看起来像是直接突变状态。对于React来说，这是一个大问题，几乎可以肯定是问题的根源。如果您需要我不在手机上的时间，我可以进一步解释

如何在多个渲染输入中使用钩子？

2 个答案: