等待useState设置值​然后调用函数

Question

我使用的是react native而不是expo，当尝试使用UseState设置值时，它不会立即设置，并且我无法获取值​​在另一个功能中。

const [gridData, setGridData] = useState([]);

useEffect(() => {
        getGridApi().then((response)=>{
            setGridData(response);
            pressed('Mon', 0);
        })
    
}, []);

const pressed = async (category, index) => {
    console.log(gridData); // empty
}

如何让它等待设置，然后调用函数pressed（）

Answer 1

Cioa，不幸的是，对于钩子，设置状态是异步的，并且您无法以这种方式获取最后一个值。但是您可以使用另一个useffecthook来检索状态变量的任何更改。

试试这个：

useEffect(() => {
   console.log(gridData);  // this shows the last value of gridData setted by the other useEffect
}, [gridData]);

但是请注意：每次gridData改变他的值时，我的worte都会被触发！

Answer 2

您可以使用此软件包，也可以为此自定义挂钩。不幸的是，react不提供useState回调功能

例子：

从“带回调的使用状态”导入useStateWithCallback；

const App = () => {
  const [count, setCount] = useStateWithCallback(0, count => {
    if (count > 1) {
      console.log('Threshold of over 1 reached.');
    } else {
      console.log('No threshold reached.');
    }
  });
 
  return (
    <div>
      <p>{count}</p>
 
      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};