从表单反应更新 state

Question

I am trying to get values from a form and store it in state. Every time I follow a guide I get the following error (not to mention the guides are all in the class style react):

"Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

The component renders and I can even pass in a dummy value to the step.generalInfo.name and it shows up on the component. However, as soon as I press a key into the input, boom error. I think the error is in one of two places - either my handleChange() or the way I am trying to update the state as I am trying to get a value in an object inside another object. I am probably not destructuring or prop drilling correctly. Please help! Thanks!

App() renders the form below:

function Form() {
  const [step, setStep] = useState({
    stage: 1,
    generalInfo: {
      name: "",
      batchSize: "",
      batchType: "",
      batchNumber: "",
      ibu: "",
      srm: "",
      abv: "",
      origionalGravity: "",
      finalGravity: "",
      brewingDate: "",
      dateSecondary: "",
      dateBottling: "",
    },
    ingredients: ["", "", ""],
    brewingNotes: "",
    hopsNotes: "",
    yeastNotes: "",
    fermentationNotes: "",

...More state and next/prev page functions...

  const handleChange = (e) => {
    console.log(e);
    console.log(e.target.name);
    console.log(e.target.value);
    setStep({ [e.target.name]: e.target.value });
    console.log(step);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
  };
  switch (step.stage) {
    case 1:
      return (
        <StepOne
          step={step}
          next={next}
          prev={prev}
          handleChange={handleChange}
          setStep={setStep}
        />
      );
  }
}

export default Form;

StepOne Component is below:

function StepOne({ step, next, prev, handleChange, setStep }) {
  const {
    name,
    batchSize,
    batchType,
    batchNumber,
    ibu,
    srm,
    abv,
    origionalGravity,
    finalGravity,
    brewingDate,
    dateSecondary,
    dateBottling,
  } = step.generalInfo;

  return (
    <div className="form-container">
      <h1>General Info</h1>
      <form>
        <div className="label-group">
          <label>Name:</label>
          <input type="text" name="name" onChange={handleChange} />
        </div>
        <button onClick={next}>Next</button>
      </form>
    </div>
  );
}

export default StepOne;

Answer 1

I believe its setStep within your handleChange method

setStep({ [e.target.name]: e.target.value });

useState doesn't merge in the same way this.setState does, therefor stage is getting overwritten and your switch statement doesn't return a render.

You instead need to pass a function to iterate state

setStep((state) => ({...state, generalInfo: {...state.generalInfo, [e.target.name]: e.target.value}}))

But given the amount of nesting, the location of e.target.name would be verbose to find; you would benefit a lot from using useReducer instead of useState.

Answer 2

Your function handleChange is incorrect, it remove all the field in state step except the current changed field. That could lead to another component will crash if it is using data from state step

It should be

const handleChange = (e) => {
    console.log(e);
    console.log(e.target.name);
    console.log(e.target.value);
    setStep({ ...step, [e.target.name]: e.target.value }); <= HERE
    console.log(step);
};

Answer 3

Fixing handleChange was the key!

  const handleChange = (e) => {
    e.persist();
    console.log(e);
    console.log(e.target.name);
    console.log(e.target.value);
    setStep((state) => ({
      ...state,
      generalInfo: { ...state.generalInfo, [e.target.name]: e.target.value },
    }));
    console.log(step);
  };