在javascript中完全执行完上面的函数后，如何确保下面的行是运行

Question

我正在编写一个函数，我希望最后两行的代码应该运行在函数 setitems() 上面的代码被完全处理之后

function addItems(event){
    event.preventDefault();
    setitems(function(previousValue){
        var newArray = [...previousValue, data];
        console.log("new array "+newArray);
        setdata("")
        return newArray;
    })
    console.log("all item "+allitems);
    props.callBackFunction(allitems);
}

目前，问题是先处理最后两行，然后再处理 setitems() 函数？请帮我看看在这种情况下我能做什么

Answer 1

您可以使用 Effect 挂钩。

看看下面的示例代码，这里 useEffect 将在组件安装时运行以及 num 更改时

const {useState, useEffect} = React;

function App() {
  const [nums, setNums] = useState([]);
  const handleClick = (e) => {
    setNums([...nums, Math.random()])
    
    console.log("Inside Click Handler", nums); 
  }
  
  useEffect(() => {
    console.log("Inside useEffect hook", nums);
  }, [nums])
  return (
    <div className="App">
      <ul>
      {nums.map((n, i) => (<li key={i}>{n}</li>))}
      </ul>
      <button id="contact" onClick={handleClick}>Add Random Num</button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="react"></div>

Answer 2

useEffect 是一个反应挂钩，它能够在定义的效果或任何效果后运行ning 发挥作用。当 all items 更改时，您可以使用此挂钩运行那两行。

// usEffect hook
useEffect(() => {
    console.log("all item "+allitems);
    props.callBackFunction(allitems);
}, [allitems]);


// Your function
function addItems(event){
    event.preventDefault();
    setitems(function(previousValue){
        var newArray = [...previousValue, data];
        console.log("new array "+newArray);
        setdata("")
        return newArray;
    })
}

useEffect 的最后一个数组称为依赖数组，每当该数组中包含的任何变量值发生变化时，其中定义的函数将立即起作用。

在javascript中完全执行完上面的函数后，如何确保下面的行是运行

How to make sure that the line down is run after the function above is executed completely in javascript

javascript

reactjs

web-development-server

您可以使用 Effect 挂钩。