Question

我有一个在每次NAME状态更改时都会调用的函数。而且我想将此更改后的值发送到父组件，但它指出了此错误：

React Hook "useEffect" is called in function "handleNameChange" which is neither a React function component or a custom React Hook function       react-hooks/rules-of-hooks

代码：

export default function config({ me, setMePut }) {
  const [name, setName] = React.useState(me.name);

  function handleNameChange(event) {
    setName(event.target.value);

    useEffect(() => {
      setMePut({
        name: name,
      });
    }, [setMePut]);
  }

  return (
    <BoxFormGrid>
      <Label>Nome</Label>
      <Input type="text" value={name} onChange={handleNameChange} />
    </BoxFormGrid>
  );
}

Answer 1

根据Rules of hooks

您只能在顶层调用挂钩。不要在里面叫钩子循环，条件或嵌套函数。

您的useEffect挂钩位于函数内部。如果保持useEffect在最高级别不符合您的要求，则可以创建一个自定义钩子。

您可以像这样更改组件以使其正常工作。

export default function config({ me, setMePut }) { //would suggest you to start react ccomponent with uppercaseletter//
  const [name, setName] = React.useState(me.name);

 useEffect(() => {
      setMePut({
        name: name,
      });
    }, [name, setMePut]);

  function handleNameChange(event) {
    setName(event.target.value);
  }

  return (
    <BoxFormGrid>
      <Label>Nome</Label>
      <Input type="text" value={name} onChange={handleNameChange} />
    </BoxFormGrid>
  );
}

正如HMR所指出的。无需为您的工作创建状态。您只需将组件重构为-

export default function config({ me, setMePut }) {

  function handleNameChange(event) {
    setMePut(prevState => ({ ...prevState, name: event.target.value }));
  }

  return (
    <BoxFormGrid>
      <Label>Nome</Label>
      <Input type="text" value={me.name} onChange={handleNameChange} />
    </BoxFormGrid>
  );
}

Answer 2

useEffect仅可用于功能组件的顶层，因此会引发错误。

对于您提到的用例，可以将useEffect移到外面，并将所需的更改道具指定为依赖项。

export default function config({ me, setMePut }) {

  useEffect(() => {
    setMePut({
      name: name,
    });
  }, [name, setMePut]);
}

只要name发生更改，该函数就会运行，您可以获得结果。

在函数“ handleNameChange”中调用React Hook“ useEffect”，该函数既不是React函数组件也不是自定义React Hook函数

2 个答案: