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

Question

我正在为我的应用程序创建表单。 我面临的问题是，每当我单击添加并生成另一行输入时，我都会收到"渲染的钩子比上次渲染时多"错误。

我有一个带有复选框的"福利"输入。当用户检查它时，我想使用 KPI 渲染另外 2 个输入(在同一行中(。如果只有一行，Hook 工作得很好。当我添加另一行时，会发生错误。

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. 您应该大写您的组件，即
RenderBenefitFields2.状态/道具无突变，onClick={() => fields.push({})}

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

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

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

Answer 2

1. 用户定义组件的名称需要大写。

2. PlusCircle中的onClick回调看起来像是直接变异状态。这对 React 来说是一个大问题，几乎可以肯定是问题的根源。如果您需要我不在移动设备😊上的时间，我可以进一步解释