reactjs 不显示来自.map()React的项目

vawmfj5a  于 2022-12-03  发布在  React
关注(0)|答案(2)|浏览(152)

实际上,我使用的代码与现有文件中的代码完全相同,而我试图使用map显示的数据只显示了其中的一部分。我试图显示一个数据表,但只显示了表头。我知道我的数据库调用不是问题所在,因为我可以看到状态组件“purchases”中的数据。

var navigate = useNavigate();

    // refundable purchases
    const [purchases, setPurchases] = useState([]);
    // current balance
    const [balance, setBalance] = useState(0);
    

    const Purchase = (props) => {
        // on click open interactive pop up confirming refund
        <tr>
            <td className='table-data'>{props.purchase.title}</td>
            <td className='table-data'>{numberFormat(props.purchase.amount)}</td>
        </tr>
    };

    useEffect(()=> {
        async function fetchData(){
            const purchaseResponse = await fetch(`http://localhost:4000/refund/`);

            if (!purchaseResponse.ok){
                window.alert(`An error occured: ${purchaseResponse.statusText}.`)
                return;
            }
            const data = await purchaseResponse.json();
            setPurchases(data);
        }
        fetchData();
        return;
    },[purchases.length]);


    function makeTable(){
        return purchases.map((element)=> {
            console.log(element);
            return (
                <Purchase
                    purchase={element}
                    key = {element._id}
                />
            );
        });
    }


    return (
        // Will Display
        <section>
        <div className='home'> 
            {/* Title */}
            <h1 className='hometitle'>
            Claim A Refund
            </h1>
            {/* Table of Clickable elements showing possilbe purchase refunds*/}
            <div>
                <table className='table' style={{marginTop:20}}>
                    <thead className='table-data'>
                        <tr>
                            <th className='table-header'>Title</th>
                            <th className='table-header'>Amount</th>
                        </tr>
                    </thead>
                    <tbody>{makeTable()}</tbody>
                </table>
            </div>
            {/* On selection of specific purchase :
                -> double check with user
                -> diplay alert box containing "Refund for <transaction title> made" */}
        </div>
        </section>
    );

我一直盯着这个像一个疯子,不知道为什么它不显示。

ebdffaop

ebdffaop1#

如果您没有看到控制台输出,这意味着您的数据没有加载之前,渲染的.map也许您可以尝试这样等待数据。

function makeTable() {
  return (
    Object.keys(purchases || [])?.length > 0 &&
    Object.entries(purchases).map((element) => {
      console.log(element);
      return <Purchase purchase={element} key={element._id} />;
    })
  );
}

也是断章取义,但对于useEffect,你不需要写“purchases.length”,只写“purchases”就足够了。

7lrncoxx

7lrncoxx2#

<tbody>{makeTable()}</tbody>改为{purchases.length > 0 && <tbody>{makeTable()}</tbody>}

相关问题