无法将表单输入值从 function 传递给反应中的组件

Question

I have a multi-step form using kendo and basically what i want to do is to pass the values from the function Charging to one of the steps so i can use the user inputs in a fetch API GET request. Normally i would have done it with props, but the thing here is that i am passing data from a function. I tried useContext but i can't make it work and i went through the kendo form code many times in order to grasp its methodology but i still can't pass the values. I am getting the values from onStepSubmit() handler and i can get them outside this callback with useState, but even then i can't pass them.

Here is the code for the main function where i get the values

import * as React from "react";
import "./Main.css";
import { Form, FormElement } from "@progress/kendo-react-form";
import { Button } from "@progress/kendo-react-buttons";
import { Stepper } from "@progress/kendo-react-layout";
import { SelectVehicle } from "./components/SelectVehicle";
import { PaymentMethod } from "./components/PaymentMethod";
import chargeIcon from "../../../../img/svg-6.svg";
import { ChargingStep } from "./components/ChargingStep";
import { Payment } from "./components/Payment";
import axios from "axios";
import { AuthContext } from "../../../../shared/context/auth-context";
import Notification from "../../Vehicles/Vehicles1/components/Notification";

const stepPages = [SelectVehicle, PaymentMethod, ChargingStep, Payment];

export const Charging = () => {
  const [step, setStep] = React.useState(0);
  const [formState, setFormState] = React.useState({});
  const [steps, setSteps] = React.useState([
    { label: "Select Vehicle", isValid: undefined },
    { label: "Method", isValid: undefined },
    { label: "Charging", isValid: undefined },
    { label: "Payment", isValid: undefined },
  ]);
  const auth = React.useContext(AuthContext);
  const [vehicleId, setVehicleId] = React.useState(false);
  const [notify, setNotify] = React.useState({
    isOpen: false,
    message: "",
    type: "",
  });

  const lastStepIndex = steps.length - 1;
  const isLastStep = lastStepIndex === step;
  const isPreviousStepsValid =
    steps
      .slice(0, step)
      .findIndex((currentStep) => currentStep.isValid === false) === -1;

  const onStepSubmit = React.useCallback(
    //add fetch vehicle data based on ID
    (event) => {
      const { isValid, values } = event;
      axios
        .get(process.env.REACT_APP_BACKEND_URL + `/cars/user/${auth.userId}`)
        .then((response) => {
          for (var i = 0; i < response.data.vehicles.length; i++) {
            if (values.vehicleID == response.data.vehicles[i]._id) {
              setVehicleId(true);
              return;
            } else {
              setVehicleId(false);
              return;
            }
          }
        });

      const currentSteps = steps.map((currentStep, index) => ({
        ...currentStep,
        isValid: index === step ? isValid : currentStep.isValid,
      }));

      setSteps(currentSteps);
      setStep(() => Math.min(step + 1, lastStepIndex));
      setFormState(values);

      if (isLastStep && isPreviousStepsValid && isValid && vehicleId) {
        // Send to api the data
        //alert(JSON.stringify(values));
        setNotify({
          isOpen: true,
          message: "Submitted Successfully",
          type: "success",
        });
      } else if (isLastStep && isPreviousStepsValid && isValid && !vehicleId) {
        setNotify({
          isOpen: true,
          message: "Wrong vehicle ID input",
          type: "error",
        });
      }
    },
    [
      step,
      steps,
      setSteps,
      setStep,
      setFormState,
      lastStepIndex,
      isLastStep,
      isPreviousStepsValid,
    ]
  );
  const onPrevClick = React.useCallback(
    (event) => {
      event.preventDefault();
      setStep(() => Math.max(step - 1, 0));
    },
    [step, setStep]
  );

  return (
      <div>
        <div className="vehicle__title">
          <div className="main__title">
            <img src={chargeIcon} alt="charging" />
            <div className="main__greeting">
              <h1>Charging Simulator</h1>
              <p>Simulate a Charge</p>
            </div>
          </div>
        </div>
        <div className="wrapper__simulator">
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
            }}
          >
            <Stepper value={step} items={steps} />
            <Form
              initialValues={formState}
              onSubmitClick={onStepSubmit}
              render={(formRenderProps) => (
                <div style={{ alignSelf: "center" }}>
                  <FormElement style={{ width: 480 }}>
                    {stepPages[step]}
                    <span
                      style={{ marginTop: "40px" }}
                      className={"k-form-separator"}
                    />
                    <div
                      style={{
                        justifyContent: "space-between",
                        alignContent: "center",
                      }}
                      className={"k-form-buttons k-buttons-end"}
                    >
                      <span style={{ alignSelf: "center" }}>
                        Step {step + 1} of 4
                      </span>
                      <div>
                        {step !== 0 ? (
                          <Button
                            style={{ marginRight: "16px" }}
                            onClick={onPrevClick}
                          >
                            Previous
                          </Button>
                        ) : undefined}
                        <Button
                          primary={true}
                          disabled={
                            isLastStep
                              ? !isPreviousStepsValid && !vehicleId
                              : false
                          }
                          onClick={formRenderProps.onSubmit}
                        >
                          {isLastStep ? "Submit" : "Next"}
                        </Button>
                      </div>
                    </div>
                  </FormElement>
                </div>
              )}
            />
          </div>
        </div>
        <Notification notify={notify} setNotify={setNotify} />
      </div>
  );
};

export default Charging;

And here is the code for the component where i need these values. In the async componentDidMount function i want the url to be http://localhost:8765/evcharge/api/providers/${values.stationID}/${values.pointID} and get the params.

class OneStep extends React.Component {  

data = [
    { text: "100%", id: 1 },
    { text: "75%", id: 2 },
    { text: "50%", id: 3 },
  ];
  state = {
    value: { text: "100%", id: 1 },
    cost: {text: "", id: null}
  };
  providers = [];
  

  async componentDidMount() {
    const url = "http://localhost:8765/evcharge/api/providers";
    const response = await fetch(url);
    const data = await response.json();
    for (var i = 0; i < data.providers.length; i++) {
      this.providers.push({
        text: "Provider: " +
          data.providers[i]
            .Title + " Cost: " + data.providers[i].kWhCost,
        id: i + 1 ,
      });
    }
  }

  numberFrom = getRandomInt(30, 50, 0);
  cost = getRandomInt(0.5, 2, 2);
  handleChange = (event) => {
    this.setState({
      value: event.target.value,
    });
    console.log(this.data);
    console.log(this.providers);
  };

  handleSecondChange = (event) => {
    this.setState({
      cost: event.target.value
    })
  }
  render() {
    return (
      <div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <div style={{ width: "50%", marginRight: "25px" }}>
            <Button
              style={{
                width: "50%",
                marginRight: "25px",
                marginTop: "35px",
                textTransform: "capitalize",
                color: "#0779e4",
                fontWeight: "600",
                fontSize: "18px",
                right: "50px",
              }}
              disabled={true}
              look="flat"
            >
              From: {this.numberFrom}
            </Button>
          </div>
          <Button
            style={{
              width: "50%",
              marginRight: "25px",
              marginTop: "35px",
              textTransform: "capitalize",
              color: "#0779e4",
              fontWeight: "600",
              fontSize: "18px",
            }}
            disabled={true}
            look="flat"
          >
            Cost per kWh: {this.cost}
          </Button>
        </div>
        <br />
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <div style={{ width: "25%", marginRight: "25px" }}>
            <DropDownList
              data={this.data}
              dataItemKey="id"
              value={this.state.value}
              onChange={this.handleChange}
              textField="text"
              defaultItem={{ text: "To" }}
            />
          </div>
          <div style={{ width: "75%", marginRight: "25px" }}>
            <DropDownList
              data={this.providers}
              dataItemKey="id"
              value={this.state.providers}
              onChange={this.handleSecondChange}
              textField="text"
              defaultItem={{ text: "Select Provider..." }}
            />
          </div>
        </div>
        <br />
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            height: "250px",
          }}
        >
          <div style={{ width: "50%", marginLeft: "15px" }}>
            <Button
              style={{
                width: "50%",
                marginRight: "25px",
                marginTop: "35px",
                textTransform: "capitalize",
                color: "#ff5349",
                fontWeight: "600",
                fontSize: "18px",
                right: "30px",
              }}
              disabled={true}
              look="flat"
            >
              <CountUp
                start={0}
                end={parseInt(
                  (parseFloat(this.state.value.text) - this.numberFrom) *
                    this.cost
                )}
                duration={15}
                useEasing={true}
                decimals={2}
                prefix="Expected Cost:  "
                suffix=" €"
                useGrouping={true}
                delay={3}
              />
            </Button>
          </div>
          <div
            style={{ width: "50%", marginRight: "25px", marginBottom: "450px" }}
          >
            <div className="g-container">
              <div className="g-number">
                <CountUp
                  start={30}
                  end={parseInt(this.state.value.text)}
                  duration={15}
                  useEasing={true}
                  decimals={2}
                  suffix=" %"
                  useGrouping={true}
                  delay={3}
                />
              </div>
              <div className="g-contrast">
                <div className="g-circle"></div>
                <ul className="g-bubbles">
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export const ChargingStep = <OneStep />;

Answer 1

Instead of exporting and using the rendered output of the OneStep component, just export and use the OneStep component itself, then you can pass whatever props you need to it.

Note there's no issue here with having a functional and class-based component as from the outside they're identical.

Start with the file that contains OneStep , change the export statement from export const ChargingStep = <OneStep />; to export const ChargingStep = OneStep; (or ideally just rename OneStep to ChargingStep and export it directly). Note you'll also have to do this with the other step components so they all work the same (but this is how React components should be exported and used anyway).

Then in the Charging component you can change the line in the return statement from {stepPages[step]} to something like:

const StepPage = stepPages[step];

return (
    // ...
    <StepPage relevantProp={value}/>
    // ...
)

Or you can add special handling for just the ChargingStep step if you don't want to pass those same components to all the other steps, which I'd recommend here.

Further Refactoring

You might consider slightly changing the way you keep track of what step the user is on from a straight index lookup to using string names so you can tell which component is going to be rendered.

You could do something like this:

const stepPages = {
    "SelectVehicle": SelectVehicle,
    "PaymentMethod": PaymentMethod,
    "ChargingStep": ChargingStep,
    "Payment": Payment,
};

const stepPageNames = ["SelectVehicle", "PaymentMethod", "ChargingStep", "Payment"];

Then to get the step you're on:

const stepPageName = stepPageNames[step];
const StepPage = stepPages[stepPageName];

Then you can do things like:

let stepPage = <StepPage />
if (stepPageName === "ChargingStep") {
    stepPage = <StepPage relevantProp={value}/>
}

And place stepPage in your return statement.