如何在反应中使用带有useState钩子的回调 [英] How to use callback with useState hook in react

问题描述

我正在使用带有钩子的功能组件.我需要从孩子更新父母的状态.我在 Parent 中使用了一个 prop 函数.一切正常，除了我的 prop 函数正在获取以前的状态而不是当前状态.我的 prop 函数在 useState 钩子设置当前状态之前执行.我怎样才能等待我的回调函数在 useState 调用后执行.我正在从基于类的组件中寻找类似 setState(state,callback) 的东西.

这里是代码片段:

函数父(){const [名称，setName] = useState("");getChildChange = getChildChange.bind(this);函数getChildChange(值){设置名称(值)；}返回 
{名称} :<Child getChildChange={getChildChange} ></Child></div>}功能孩子(道具){const [名称，setName] = useState("");handleChange = handleChange.bind(this);函数句柄变化(ele){setName(ele.target.value);props.getChildChange(collectState());}功能收集状态(){返回名称；}返回 (
;<input onChange={handleChange} value={Name}></input></div>);}

解决方案

可以使用useEffect/useLayoutEffect来实现:

const SomeComponent = () =>{const [count, setCount] = React.useState(0)React.useEffect(() => {如果(计数 > 1){document.title = '达到超过 1 的阈值.';} 别的 {document.title = '未达到阈值.';}}， [数数]);返回 (
<p>{计数}</p><button type="button" onClick={() =>setCount(count + 1)}>增加</按钮></div>);};

在这里了解更多信息.

如果您正在寻找开箱即用的解决方案，请查看 这个自定义钩子，其工作方式类似于 useState，但接受回调函数作为第二个参数:

//npm install use-state-with-callback从'use-state-with-callback'导入useStateWithCallback；const SomeOtherComponent = () =>{const [count, setCount] = useStateWithCallback(0, count => {如果(计数 > 1){document.title = '达到超过 1 的阈值.';} 别的 {document.title = '未达到阈值.';}});返回 (
<p>{计数}</p><button type="button" onClick={() =>setCount(count + 1)}>增加</按钮></div>);};

I am using functional component with hooks. I need to update state in parent from a child. I am using a prop function in Parent. All works fine except my prop function is getting the previous state and not the current state. My prop function gets executed before useState hook setting current state. How can I can I wait for my call back function to be executed after useState call. I am looking for something like setState(state,callback) from class based components.

Here is the code snippet:

function Parent() {
  const [Name, setName] = useState("");
  getChildChange = getChildChange.bind(this);
  function getChildChange(value) {
    setName(value);
  }

  return <div> {Name} :
    <Child getChildChange={getChildChange} ></Child>
  </div>
}

function Child(props) {
  const [Name, setName] = useState("");
  handleChange = handleChange.bind(this);

  function handleChange(ele) {
    setName(ele.target.value);
    props.getChildChange(collectState());
  }

  function collectState() {
    return Name;
  }

  return (<div>
    <input onChange={handleChange} value={Name}></input>
  </div>);
} 

解决方案

You can use useEffect/useLayoutEffect to achieve this:

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

More about it over here.

If you are looking for an out of the box solution, check out this custom hook that works like useState but accepts as second parameter a callback function:

// npm install use-state-with-callback

import useStateWithCallback from 'use-state-with-callback';

const SomeOtherComponent = () => {
  const [count, setCount] = useStateWithCallback(0, count => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  });

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

这篇关于如何在反应中使用带有useState钩子的回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！