Блог

Главная - Вопросы по программированию - Передача данных обратно в React useContext

Передача данных обратно в React useContext

#reactjs #use-context

#reactjs #использовать-контекст

Вопрос:

У меня есть context.js как следует, и до сих пор данные жестко закодированы (широта и долгота), а также начальные значения погоды, сохраненные в виде объектов в том же формате, который я получу с сервера. На данный момент у меня есть поле ввода, в конечном итоге оно будет изменено на Google places, но я просто хотел, чтобы функциональность работала сейчас.

Как я могу вернуть входные данные из формы обратно в контекст, чтобы снова запустить запрос на выборку при отправке формы?

Сервер и запрос axios работают идеально.

Мой текущий context.js который предусмотрен в index.js оборачивая все вокруг

 const AppProivider = ({ children }) => {
  const [loading, setLoading] = useState(false);
  const [latitude, setLatitude] = useState(54.978252);
  const [longitude, setLongitude] = useState(-1.61778);
  const [current, setCurrent] = useState(currentx);
  const [hourly, setHourly] = useState(hourlyx);
  const [future, setFuture] = useState(futurex);

  const fetchWeather = useCallback(async () => {
    setLoading(true);
    try {
      const response = await axios.get("http://localhost:8000/weather", {
        params: { latitude, longitude },
      });

      const { current, hourly, future } = await response.data;
      if (current amp;amp; hourly amp;amp; future) {
        setCurrent(current);
        setHourly(hourly);
        setFuture(future);
      } else {
        setCurrent(currentx);
        setFuture(hourlyx);
        setHourly(futurex);
      }
      setLoading(false);
    } catch (error) {
      setLoading(false);
      console.log(error);
      return "There was a problem fetching the weather information, please try again";
    }
  }, [latitude, longitude]);

  useEffect(() => {
    fetchWeather();
  }, [latitude, longitude, fetchWeather]);

  return (
    <AppContext.Provider
      value={{
        loading,
        current,
        future,
        hourly,
        setLongitude,
        setLatitude,
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

export const useGlobalContext = () => {
  return useContext(AppContext);
};

export { AppContext, AppProivider };

Мой текущий, очень простой, App.js для сбора информации

 import { useGlobalContext } from "../../context";

const App = () => {
  const { current, hourly, future, setLatitude } = useGlobalContext();
  const [lat, setLat] = useState(1);

  const handleChange = (e) => {
    e.preventDefault();
    setLatitude(lat);
    console.log(current);
  };

  return (
    <div>
      <form onSubmit={handleChange}>
        <input type="number" onChange={(e) => setLat(e.target.value)}></input>
        <input type="submit"></input>
      </form>
    </div>
  );
};

export default App;

Ответ №1:

если вам нужно изменить контекст, вы должны использовать useState и поместить внутри context state и setState

 const App = () => {

let [state,setState] = useState({value: 1, value: 2})

   <AppContext.Provider value={{state,setState}}>
        <YourComponent />
    </AppContext.Provider>
}

теперь все ваши компоненты знакомы с состоянием, и все они тоже могут изменять состояние, вам нужно только извлечь эту функцию из контекста и использовать, когда вам нужно

 let {state,setState} = useContext(AppContext);

Комментарии:

1. Я не понимаю? У меня есть состояния в контексте и передать setState этому компоненту?

2. Спасибо, но я делаю это. Весь мой компонент <App> заключен в поставщик контекста в index.js и мой компонент приложения разрушает setState (в данном случае setlatity) из реквизитов вместе со значениями. Я могу получить доступ к значениям, поэтому я также могу получить доступ к функции setState. Когда я обновляю функцию set state в приложении, я хочу, чтобы она вызывала функцию fetchWeather в моем контексте и также обновляла состояния в контексте, что должно работать с кодом в context.js

3. Я пытаюсь сделать то же самое.. Я нашел несколько более подробных документов в расширенном разделе react native hooks, которые мне очень помогли: reactjs.org/docs /…

Ответ №2:

Я решил это сам с помощью простой ошибки, которую я допустил. Функциональность была в порядке, это была ошибка опечатки / параметра от меня. В context.js Я изменился

 const response = await axios.get('http://localhost:8000/weather', {
                params: { latitude, longitude }
            })

Для этого

 const response = await axios.get('http://localhost:8000/weather', {
                params: { lat: latitude, lon: longitude }
            })

Поскольку мой сервер имеет код, как показано ниже, и ожидал, что параметры запроса будут отличаться от того, что я предоставил

 const { lat, lon } = req.query