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

查看:29
本文介绍了如何在反应中使用带有 useState 钩子的回调的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这是代码片段:

function Parent() {const [Name, setName] = useState("");getChildChange = getChildChange.bind(this);函数 getChildChange(value) {设置名称(值);}返回 

{名称} :<Child getChildChange={getChildChange} ></Child>

}函数子(道具){const [Name, setName] = useState("");handleChange = handleChange.bind(this);函数 handleChange(ele) {setName(ele.target.value);props.getChildChange(collectState());}函数收集状态(){返回名称;}返回 (<div><input onChange={handleChange} value={Name}></input>

);}

解决方案

你可以使用 useEffect/useLayoutEffect 来实现:

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

);};

通过此处了解更多信息.

如果您正在寻找开箱即用的解决方案,请查看 这个自定义钩子 像 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 = '未达到阈值.';}});返回 (<div><p>{count}</p><button type="button" onClick={() =>setCount(count + 1)}>增加

);};

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屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆