在功能性反应组件中获取未定义的道具

Question

执行完setRequests后，如何将{requests} prop传给RequestRow组件？我的理解是，请求在开始时被初始化为未定义，并且在使用异步调用的对象进行设置之前，它被作为未定义传递给 RequestRow 组件，并且发生了错误。

import React, { useState, useEffect } from 'react';
import 'semantic-ui-css/semantic.min.css';
import Layout from '../../../components/Layout';
import { Button } from 'semantic-ui-react';
import { Link } from '../../../routes';
import Campaign from '../../../blockchain/campaign';
import { Table } from 'semantic-ui-react';
import RequestRow from '../../../components/RequestRow';

const RequestsIndex = ({ address }) => {
  const { Header, Row, HeaderCell, Body } = Table;
  const campaign = Campaign(address);
  const [requestCount, setRequestCount] = useState();
  const [requests, setRequests] = useState([]);

  const getRequests = async () => {
    const count = await campaign.methods.getRequestsCount().call();
    setRequestCount(count);
  };

  let r;

  const req = async () => {
    r = await Promise.all(
      Array(parseInt(requestCount))
        .fill()
        .map((_element, index) => {
          return campaign.methods.requests(index).call();
        })
    );
    setRequests(r);
  };

  useEffect(() => {
    getRequests();
    if (requestCount) {
      req();
    }
  }, [requestCount]);

  return (
    <Layout>
      <h3>Requests List.</h3>
      <Link route={`/campaigns/${address}/requests/new`}>
        <a>
          <Button primary>Add Request</Button>
        </a>
      </Link>
      <Table>
        <Header>
          <Row>
            <HeaderCell>ID</HeaderCell>
            <HeaderCell>Description</HeaderCell>
            <HeaderCell>Amount</HeaderCell>
            <HeaderCell>Recipient</HeaderCell>
            <HeaderCell>Approval Count</HeaderCell>
            <HeaderCell>Approve</HeaderCell>
            <HeaderCell>Finalize</HeaderCell>
          </Row>
        </Header>
        <Body>
          <Row>
            <RequestRow requests={requests}></RequestRow>
          </Row>
        </Body>
      </Table>
    </Layout>
  );
};

export async function getServerSideProps(context) {
  const address = context.query.address;
  return {
    props: { address },
  };
}

export default RequestsIndex;

RequestRow 组件如下所示。它接受 {requests} 属性，不幸的是它是未定义的。

const RequestRow = ({ requests }) => {
      return requests.map((request, index) => {
        return (
          <>
            <div>Request!!!</div>
          </>
        );
      });
    };
    
export default RequestRow;

错误截图如下：

Answer 1

我认为 React 正在尝试在您的承诺解决之前呈现您的组件。如果是这种情况，您需要做的就是为您的请求设置一个默认值（在您的情况下是一个空数组）。

const [requests, setRequests] = useState([]);

愿原力与你同在

在功能性反应组件中获取未定义的道具

Getting undefined props in functional react components

javascript

reactjs

react-props

use-effect

react-functional-component