reactjs - 加载来自 api 的反应组件的正确方法是什么？

Question

<Row>
  <Col>
    {!loading ? <p></p> : <p>Loading...</p>}
    <MaterialTable
      title="Controller Pending Items"
      icons={tableIcons}
      columns={columns}
      data={items}
      options={{
        sorting: true,
        exportButton: true,
        search: true,
        exportAllData: true,
      }}
      actions={[
        {
          icon: () => <ViewColumn />,
          tooltip: "View",
          onClick: (event, rowData) => {
            setSelectedItem(rowData);
            setShowModal(true);
          },
        },
      ]}
    />
  </Col>
</Row>
<ControllerModal
  show={showModal}
  selectedItem={selectedItem}
  func={(returnValue) => {
    setShowModal(returnValue);
  }}
/>

每次调用模态时，我都会收到一个错误.map。我不确定我正在做的是否是正确的方法。

这是我的模态组件：当单击按钮时，从父组件将数据传递给子组件，并且数据应发布在模态组件上。

<Modal
  backdrop="static"
  keyboard={true}
  size="xl"
  show={props.show}
  onHide={() => {
    props.func(false);
  }}
>
  <Modal.Header closeButton>
    <Modal.Title>Insight ID: {selectedItem.insightId}</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    {!loading ? <p></p> : <p>Loading...</p>}
    {!selectedItem ? <p>1</p> : <Row className="mb-2">
      <Col>
        <Row>
          <Col>
            <p>Insight Title: {selectedItem.insightTitle}</p>
          </Col>
        </Row>
        <Row>
          <Col>
            <p>
              Category Idea:{" "}
              {!selectedItem.categoryIdea ? (
                <span></span>
              ) : (
                <span>{selectedItem.categoryIdea.categoryIdeaName}</span>
              )}
            </p>
          </Col>
          <Col>
            <p>
              Contributor EID:{" "}
              {!selectedItem.roster ? (
                <span></span>
              ) : (
                <span>{selectedItem.roster.eid}</span>
              )}
            </p>
          </Col>
        </Row>
        <Row>
          <Col>
            <p>
              Contributor EID:{" "}
              {!selectedItem.roster ? (
                <span></span>
              ) : (
                <span>{selectedItem.roster.location.locationName}</span>
              )}
            </p>
          </Col>
          <Col>
            <p>Contributor TeamLead: "N/A"</p>
          </Col>
        </Row>
        <Row>
          <Col>
            <Card className="mb-2">
              <Card.Header>Comment</Card.Header>
              <Card.Body>
                Comment:{" "}
                {!selectedItem.comment ? (
                  <span></span>
                ) : (
                  <span>{selectedItem.comment}</span>
                )}
              </Card.Body>
            </Card>
          </Col>
        </Row>
        <Row className="mb-2">
          {!selectedItem.categoryIdeaOptionValues ? (
            <p>1</p>
          ) : (
            <span>
              {selectedItem.categoryIdeaOptionValues.map((a, i) => {
                return (
                  <Col key={i}>
                    <Card className="mb-2">
                      <Card.Header>
                        {a.categoryIdeaOption.categoryIdeaOptionName}
                      </Card.Header>
                      <Card.Body>{a.categoryIdeaOptionValue}</Card.Body>
                    </Card>
                  </Col>
                );
              })}
            </span>
          )}
        </Row>

标签： reactjs