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

Question

我正在为我的应用程序创建表单。我面临的问题是，每当我单击添加并生成另一行输入时，我都会收到 "Rendered more hooks than during the previous render" 错误。

我有一个带复选框的 "benefit" 输入。当用户检查它时，我想用 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>
);

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

Answer 1

user-defined个组件名称需要大写
PlusCircle 中的onClick 回调看起来是直接变异状态。这对 React 来说是个大问题，几乎可以肯定是你问题的根源。如果你需要，我可以进一步解释，我不在手机上

Answer 2

如Ross Hunter所述，
1. 你应该将你的组件大写，即 RenderBenefitFields
2. state/props, onClick={() => fields.push({})}

无突变

此外，您应该在 renderBenefits 中调用您的 RenderBenefitFields，如下所示：

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

P.S。您可以使用唯一键而不是索引，具体取决于您的情况。

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

How to use hooks in multiple rendered inputs?

reactjs

react-hooks