为什么 forEach 如果返回 []？

Question

我有一个包含一些订单的数组，该数组的名称是 getOrdersBySalesman。订单有一些属性：id、client、stage。我想按阶段过滤订单，但它不起作用， 例如，当我选择“PENDENT”时，为什么 console.log 是 [] 我需要将 filterOrders 的结果发送到另一个组件，但我没有结果。怎么了？？？？

const Comandes = () => {
  const [orderStage, setOrderStage] = useState('')

  useEffect(() => {
    setOrderStage(orderStage)
  }, [orderStage])

  let filterOrders = []

  const filterStage = newStage => {
    getOrdersBySalesman.forEach(order => {
       if (order.stage === newStage) {
        filterOrders.push(order)
      }
    });
    setOrderStage(newStage)
  }
  console.log(filterOrders) = > IS []

  return (
    <div>
      <Layout>
        <select
          value={orderStage}
          onChange={e => filterStage(e.target.value)}
        >
          <option value="TOTS ELS ESTATS">TOTS ELS ESTATS</option>
          <option value="ACABADA">ACABADA</option>
          <option value="PENDENT">PENDENT</option>
          <option value="CANCELADA">CANCELADA</option>
        </select>
      {filterOrders.length === 0 ? (
          <p className="mt-5 text-center text-2xl">Encara no hi ha comandes </p>
        ) : (filterOrders.map(order => (
          <Order key={order.id} order={order} />
        ))
          )}
      </Layout>
    </div >
  )
}
export default Comandes

Answer 1

实际上Array#forEach 不会返回任何内容，它只会在select、onChange 事件上运行。所以你应该等待更改select。此外，为了获得更好的性能，您应该使用Array#filter 和useState 挂钩，而不是声明变量并使用Array#forEach。

所以你的最终代码应该是这样的：

const [filterOrders , setFilterOrders ] = useState([])

const filterStage = (newStage) => {
  setFilterOrders(getOrdersBySalesman.filter(
    (order) => order.stage === newStage
  ));
  setOrderStage(newStage);
};

useEffect(()=> {
  console.log(filterOrders);
}, [filterOrders]);