Блог

Главная - Вопросы по программированию - API контекста реакции: поставщик состояний не отображает компонент приложения

API контекста реакции: поставщик состояний не отображает компонент приложения

#reactjs

Вопрос:

Я использую React-Context-API вместо redux, но после создания stateProvider и редуктора, когда я заворачиваю компонент приложения внутри stateProvider в Index.js. Все мое приложение заменено белой страницей на локальном хосте. Фрагменты кода приведены ниже.

Index.js

 import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { StateProvider } from "./StateProvider";
import reducer, { initialState } from "./reducer";

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

StateProvider.js

 import React, { createContext, useContext, useReducer } from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, childern }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {childern}
  </StateContext.Provider>
);

export const useStatevalue = () => useContext(StateContext);

reducer.js

 export const initialState = {
  //   user: null,
  basket: [],
};

function reducer(state, action) {
  switch (action.type) {
    case "ADD_TO_BASKET":
      break;
    case "REMOVE_FROM_BASKET":
      break;
    default:
      return state;
  }
}

export default reducer;

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

1. Ваше состояние должно быть фактическим состоянием в компоненте stateProvider, а не объектом Javascript

2. Можете ли вы привести пример, который я не понял? Заранее спасибо

Ответ №1:

childern должно быть children , в StateProvider.js

Ответ №2:

Ты неправильно children написала . И ваш редуктор всегда должен возвращать состояние и не break возвращать .

Метки: