高阶组件不传递输入列表

Question

export const HOC = (WrappedComponent) => {


  const { register, control, handleSubmit, reset, watch } = useForm({
    defaultValues: {
      test: [{ firstName: "Bill", lastName: "Luo" }]
    }
  });
  const { fields, append, prepend, remove } = useFieldArray({
    control,
    name: "test"
  });

  return (
    <form>
   
      <ul>
        {fields.map((item, index) => {
          return (
            <WrappedComponent
              item={item}
              removeindex={remove}
              index={index}
              {...register(`test.${index}.firstName`)}
            />
          );
        })}
      </ul>
      <section>
        <button
          type="button"
          onClick={() => {
            append({ firstName: "appendBill" });
          }}
        >
          Append
        </button>
      </section>
    </form>
  );
};
export default HOC 

const InputList = props => {

 
    return (
        <li key={props.item.id}>
         <input   {...props}  ></input>
         <button onClick={() => props.removeindex(props.index)} type="button" >Delete</button>
          
      </li>
        
    );
};
export default HOC(InputList)

上面我创建了带有 React hooks 和 React FORM hook 的高阶组件，以呈现输入列表组件。但是我收到以下错误

挂钩调用无效。钩子只能在函数体内调用组件.

Answer 1

您的高阶组件 (HOC) 不是 return 一个 React 组件，并且 React 挂钩逻辑不在您尝试 return 的 React 组件中。

HOC 通常至少有一个看起来像这样的签名：

const withHOC = WrappedComponent => props => <JSX />

HOC 实际上只是高阶函数，但在 React 的世界中，它是一个 return 是 React 组件的函数。如果上面的“柯里化”视图有点难以理解，也许这个扩展视图会有所帮助：

const withHOC = WrappedComponent => {
  // some HOC logic
  return props => {
    // some fancy component logic
    return (
      <WrappedComponent {...props} {/* ...HOC props? */} />
    );
  };
};

在您的代码中，您缺少“内部”匿名 React 组件。不要忘记向要映射的组件添加一个 React 键，这样当元素被删除或底层字段数据数组为 sorted/mutated/etc React 的协调过程可以正常运行时，使用映射项的 id 属性.

export const HOC = WrappedComponent => {
  return props => {
    const { register, control, handleSubmit, reset, watch } = useForm({
      defaultValues: {
        test: [{ firstName: "Bill", lastName: "Luo" }]
      }
    });

    const { fields, append, prepend, remove } = useFieldArray({
      control,
      name: "test"
    });

    return (
      <form>
        <ul>
          {fields.map((item, index) => (
            <WrappedComponent
              key={item.id} // <-- add React key for deletion reconciliation
              item={item}
              removeindex={remove}
              index={index}
              {...register(`test.${index}.firstName`)}
            />
          ))}
        </ul>
        <section>
          <button
            type="button"
            onClick={() => append({ firstName: "appendBill" })}
          >
            Append
          </button>
        </section>
      </form>
    );
  };
};

高阶组件不传递输入列表

Higher Order componnt does not dilver InputList

reactjs

react-hooks

higher-order-components