如何将数据从功能组件传递到类组件

Posted 2021-04-30

我是ReactJS的新手，并为用户输入数据（日期和选择）创建了一个功能组件。另一个类组件，用于从用户输入数据中调用API。我需要将输入值从功能组件传递到类组件。

您能帮忙吗？

下面是带有输入字段的功能组件的代码段。 setShowGetAPI最初设置为false，一旦用户单击“提交”按钮，它将为true。请让我知道条件是否正确

  const [showTable, setshowTable] = useState("hidetable");
const [showGetAPI, setShowGetAPI] = React.useState("false");  


  const [startDate, setStartDate] = useState(false);
  const [endDate, setendDate] = useState(false);
  const [expenseType, setexpenseType] = useState(false);


const showMessage = () => {
    setshowTable("");
    setShowGetAPI("true");
  };

  debugger;
  const handleEndDate = (e) => {
    setendDate(e.target.value);
  };

  const handleStartDate = (e) => {
    setStartDate(e.target.value);
  };

  const handleType = (e) => {
    console.log(e.target.value);
    setexpenseType(e.target.value);
  };
  console.log(endDate);

  return (
    <div>
      <Navbar color="info" light expand="md">
        <Nav color="info" navbar>
          <NavItem className="hdr">
            <NavLink>API Demo Tool</NavLink>
          </NavItem>
        </Nav>
      </Navbar>
      <Nav tabs>
        <NavItem>
          <NavLink
            className={{ active: activeTab === "1" }}
            onClick={() => {
              toggle("1");
            }}
          >
            Request
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            className={{ active: activeTab === "2" }}
            onClick={() => {
              toggle("2");
            }}
          >
            Receipt
          </NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={activeTab}>

        <TabPane tabId="2">
          <br />
          <Form>
            <FormGroup row>
              <Label for="Start Date" sm={1}>
                Start Date
              </Label>
              <Col sm={2}>
                <Input
                  type="date"
                  name="startDate"
                  id="startDate"
                  placeholder="startDate"
                  value={startDate}
                  onChange={handleStartDate}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Label for="End Date" sm={1}>
                End Date
              </Label>
              <Col sm={2}>
                <Input
                  type="date"
                  name="endDate"
                  id="endDate"
                  value={endDate}
                  placeholder="endDate"
                  onChange={handleEndDate}
                />
              </Col>
            </FormGroup>
            <FormGroup row>
              <Label for="Segment" sm={1}>
                Expense Type
              </Label>
              <Col sm={2}>
                <Input
                  type="select"
                  name="expenseType"
                  value={expenseType}
                  id=" expenseType"
                  onChange={handleType}
                >
                  <option>Hotel</option>
                  <option>Airfare</option>
                  <option>Rail</option>
                  <option>All</option>
                </Input>
              </Col>
            </FormGroup>
            <FormGroup check row>
              <Col sm={{ size: 10, offset: 1 }}>
                <Button onClick={showMessage}>Submit</Button>
              </Col>
            </FormGroup>
          </Form>
          <div>

            {showGetAPI == "true" && (
            <div>
              <GetAPI
                startDt={startDate}
                endDt={endDate}
                exptype={expenseType}
              />
            </div>
          )}
          </div>
          <div class={showTable}>
            <Table></Table>
          </div>
        </TabPane>
      </TabContent>
    </div>
  );
};

export default TabsDemo;

GETAPI-这是一个类组件，我需要上述功能组件的输入值才能使用req调用API。参数

class GetAPI extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ID: [],
      ReportEntryID: [],
      token: null,
      Url: [
        {
          Url: "",
        },
      ],
    };
  }

  componentDidMount() {

    console.log(this.props.exptype);
    var accesstoken;
    let reports = [];

    axios
      .post(API, qs.stringify(requestBody), config)
      .then((result) => {
        console.log(result);
        this.setState({ token: result.data.access_token });
        accesstoken = result.data.access_token;
        console.log("access token ins " + accesstoken);
        invokeGetReport(accesstoken);
      })
      .catch((error) => {
        console.log(error);
        console.log(error.data);
      });

    function invokeGetReport(accesstoken) {
      console.log("access token is " + accesstoken);
      const config_req = {
        headers: {
          Accept: "application/json",
          Authorization: "Bearer " + accesstoken,
        },
      };

      axios
        .get(test_report_url, config_req)
        .then((resp) => {
          console.log(resp);
          console.log("data id is " + resp.data.Items.length);

          //  debugger;
          for (let i = 0; i < resp.data.Items.length; i++) {
            let reportName = resp.data.Items[i].Name;
            let reportID = resp.data.Items[i].ID;
            console.log("id is : " + reportID + "Report Name : " + reportName);
            invokeGetReportDetails(accesstoken, reportID);
            reports.push(reportID);
          }
          //  invokeGetReportDetails(accesstoken, reports);
        })
        .catch((error) => {
          console.log(error);
          console.log(error.data);
        });
    }

    function invokeGetReportDetails(accesstoken, reportID) {
      console.log("reportID in detail API is " + reportID);
      const config_req = {
        headers: {
          Accept: "application/json",
          Authorization: "Bearer " + accesstoken,
        },
      };

      axios
        .get(report_details + reportID, config_req)
        .then((resp) => {
          console.log(resp);
          console.log(
            "report data id is " + resp.data.ExpenseEntriesList.length
          );
          for (let i = 0; i < resp.data.ExpenseEntriesList.length; i++) {
            let expenseEntryId = resp.data.ExpenseEntriesList[i].ReportEntryID;
            let ExpenseTypeName =
              resp.data.ExpenseEntriesList[i].ExpenseTypeName;
            console.log(
              "id is : " +
                expenseEntryId +
                " ExpenseTypeName : " +
                ExpenseTypeName
            );
            invokeImageURL(accesstoken, expenseEntryId);
          }
        })
        .catch((error) => {
          console.log(error);
          console.log(error.data);
        });
    }

    function invokeImageURL(accesstoken, expenseEntryId) {
      console.log("expenseEntryId in detail API is " + expenseEntryId);

      const config_req = {
        headers: {
          Accept: "application/json",
          Authorization: "Bearer " + accesstoken,
        },
      };

      axios
        .get(image_url + expenseEntryId, config_req)
        .then((resp) => {
          console.log(resp);
          console.log("URL is " + resp.data.Url);
          this.setState({ Url: resp.data.Url });
        })
        .catch((error) => {
          console.log(error);
          console.log(error.data);
        });
    }

    console.log("repoddrts sdda " + reports[1]);
    console.log("prop value is " + this.props);
    // console.log("report id " + this.state.ID);
  }

  render() {
    return <h1> {this.props.startdate}</h1>;
  }
}

export default GetAPI;

答案

您正在通过prop从类组件中的功能组件传递数据。因此，您应该能够访问GetAPI类组件中的数据，例如：

this.props.startDt
this.props.endDt
this.props.exptype

另一答案

您的getApi组件安装在父组件的第一个渲染器上。因此，您必须像这样在getApi组件中使用componentDidUpdate进行检查。

在您的getApi组件中

componentDidUpdate = (prevProps) => {  
  console.log('prevProps',prevProps);
  console.log('this props',this.props);
}

检查您是否获得道具？希望这会有所帮助。