时间戳

首页 > 解决方案 > React 不等待获取数据[编辑]

reactjs - React 不等待获取数据[编辑]

问题描述

我给了条件以if等待useEffect()获取数据..
invoice && invoice['data']像这样。
我的期望是setMoney()会奏效。但它只是通过了这个函数。
invoice从存储中获取数据。

这是视图组件。

import React, {useContext, useEffect, useState} from 'react';
import './invoice.scss';
import InvoiceFilter from './invoice_filter';
import InvoiceTable from './invoice_table';
import {invoiceContext} from '@/context/invoice_dataStore';

function Invoice(props) {
  const {invoice, getInvoiceInitialData} = useContext(invoiceContext);
  const [receivable, setReceivable] = useState(0);
  const [pending, setPending] = useState(0);

  useEffect(() => {
    if (invoice && invoice['data']) {
      setMoney();
    }
  }, []);

  function setMoney() {
    if (invoice && invoice['data']) {
      const infoSt = invoice['data'].map((info) => info);
      infoSt.forEach((info) => {
        switch (info.status) {
          case 100: //receivable
            setReceivable((prev) => prev + info.amount);
            break;
          case 200: // Pending
            setPending((prev) => prev + info.amount);
            break;
          default:
            throw new Error('unknown command');
        }
      });
    }
  }


  return (
    <React.Fragment>
      <div className="invoice">
          <strong>${receivable}</strong>
          <strong>$ {pending}</strong>
       </div>
    </React.Fragment>
  );
}

export default Invoice;


if(invoice && invoice['data']){
    setMoney();
  }

因为这行得通。

let showTable;
if(invoice && invoice['data']){
    showTable = invoice['data'].map((info) => 
      <div>{info.title}</div>)
    }
  }


return (
    <>
     {showTable}
    </>
)

标签： reactjs

解决方案

useEffect仅在初始组件挂载后调用具有空依赖项数组。您的上下文中的数据很可能invoice在执行时未填充useEffect。

要解决此问题，您必须将依赖项invoice作为依赖项传递给useEffect钩子，以便您的函数可以在其值更改时执行。

useEffect(() => {
    if (invoice && invoice['data']) {
      setMoney();
    }
  }, [invoice]);

推荐阅读