Блог

У меня есть два компонента, первый используется для получения данных из формы, второй используется для сохранения собранных данных. Есть rideData объект, в AddRideForm.js котором я храню данные из входных данных. Я хочу отправить этот объект в rides-context файл и вставить его сюда const [rides, setRides] = useState . Не могли бы вы, пожалуйста, сказать мне, почему в useState (), упомянутом выше, нет собранных данных после того, как я распечатал их в консоли ?

AddRideForm.js

 const AddRideForm2 = () =gt; {  const [userInput, setUserInput] = useState({  name: "",  hour: "",  });  const ctx = useContext(RidesContext);   const nameHandler = (e) =gt; {  setUserInput((prevState) =gt; {  return { ...prevState, name: e.target.value };  });  };  const hourHandler = (e) =gt; {  setUserInput((prevState) =gt; {  return { ...prevState, hour: e.target.value };  });  };   const submitHandler = (e) =gt; {  e.preventDefault();  const rideData = {  name: userInput.name,  hour: userInput.hour,  };   ctx.onAdd(rideData);  console.log(userInput);  console.log(ctx.ridesList);  console.log(ctx.onAdd);  };   return (  lt;RidesContextProvidergt;  lt;form className={classes.addRideFormContainer} onSubmit={submitHandler}gt;  lt;Input  className={classes.addRideFormInput}  value={userInput.name}  onChange={nameHandler}  gt;lt;/Inputgt;  lt;Input  className={classes.addRideFormInput}  value={userInput.hour}  onChange={hourHandler}  gt;lt;/Inputgt;  lt;button className={classes.addRideFormButton}gt;Dodajlt;/buttongt;  lt;/formgt;  lt;/RidesContextProvidergt;  ); };  export default AddRideForm2;   

rides-context.js

 const RidesContext = React.createContext({  ridesList: {},  onAdd: (data) =gt; {},  onDelete: () =gt; {}, });  export const RidesContextProvider = (props) =gt; {  const [rides, setRides] = useState([  {  hour: "12:00",  name: "Jan",  },  {  hour: "12:00",  name: "Bartek ",  },  {  hour: "12:00",  name: "Kamil",  },  ]);   const addRideHandler = (data) =gt; {  setRides(data);  };   return (  lt;RidesContext.Provider  value={{  ridesList: rides,  onAdd: addRideHandler,  }}  gt;  {props.children}  lt;/RidesContext.Providergt;  ); };  export default RidesContext;