Question

我正在尝试更改我的上下文状态，我只能假设我遗漏了一些东西，因为我之前已经使用过上下文。我很难在我的上下文中更改“isOpen”属性

这是我的代码：CodeSand

**app.tsx**
export default function App() {
const { setIsOpen, isOpen }=useContext<IChartPlotDataContext>(PlotContext);

return (
  <GraphPlotProvider>
    <h1>Hello CodeSandbox</h1>
    <h2>Is Open: {JSON.stringify(isOpen)}</h2>
    <button onClick={() => setIsOpen(true)}>Change context</button>
  </GraphPlotProvider>
 );
}

**types.t.ts**
export type IAnnotationData = {
  yValue: string;
  datasetName: string;
  xValue: string;
  isNewData: boolean;
};

export type IChartPlotDataContext = {
  data: IAnnotationData;
  step: number;
  setStep: (step: number) => void;
  isOpen: boolean;
  setIsOpen: (show: boolean) => any;
  setData: (data: IAnnotationData) => void;
  handlePlotClick: (eventObj, dataObj, annotations) => void;
  addAnnotationData: (
    chart: any,
    xAxis: number,
    yAxis: number,
    id: string
  ) => void;
};

**context.tsx**
const contextDefaultValues: IChartPlotDataContext = {
  data: { yValue: "", datasetName: "", xValue: "", isNewData: false },
  step: 1,
  isOpen: false,
  setStep: () => {},
  setIsOpen: () => {},
  setData: () => {},
  handlePlotClick: () => {},
  addAnnotationData: () => {}
 };

export const PlotContext = createContext<IChartPlotDataContext>(
 contextDefaultValues
 );

const GraphPlotProvider: FC = ({ children }) => {
  const [plotData, setPlotData] = useState<IAnnotationData>(
  contextDefaultValues.data
  );
const [overlayStep, setOverlayStep] = useState<number>(
  contextDefaultValues.step
  );
const [open, setOpen] = useState<boolean>(contextDefaultValues.isOpen);

const setIsOpen = (show: boolean) => {
  setOpen(show);
};

const setData = (data: IAnnotationData) => {
  setPlotData(data);
};

const setStep = (s: number) => {
  setOverlayStep(s);
 };

 const addAnnotationData = (
  annotation: any,
  xAxis: number,
  yAxis: number,
  id: string
): void => {
  annotation.addGroup({
    id: id.replace(/ /g, "_")
  });
  //Adding rectangle annotation item to the annotation group
    annotation.addItem(
      "totalFootfall",
      {
      id: id.replace(/ /g, "_"),
      type: "circle",
      x: xAxis,
      y: yAxis,
      radius: "12",
      color: "#00fefe",
      border: "2",
      borderColor: "#03504d"
      },
      true
    );
   };

const handlePlotClick = (eventObj, dataObj, x) => {
const annotation = eventObj.sender.annotations;

  if (open) {
    const selectPointData = {
      datasetName: dataObj.datasetName,
      xValue: dataObj.categoryLabel,
      yValue: dataObj.displayValue,
      chartX: dataObj.chartX,
      chartY: dataObj.chartY,
      isNewData: true
    };
    addAnnotationData(
      annotation,
      dataObj.chartX,
      dataObj.chartY,
      dataObj.categoryLabel
    );
    setStep(2);
    return setData(selectPointData);
   }
 };

  return (
    <PlotContext.Provider
      value={{
        data: plotData,
        isOpen: open,
        setIsOpen,
        setData,
        step: overlayStep,
        setStep,
        handlePlotClick,
        addAnnotationData
      }}
    >
      {children}
     </PlotContext.Provider>
   );
 };

export default GraphPlotProvider;

我也将完整代码添加到我的问题中 谢谢SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS 谢谢sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

Answer 1

您必须将 Provider 和 Consumer 包裹在 App 组件之外（这意味着 index 才能生效）。我修改了你的代码，做了一些改动，使它对我更易读 here is the link

React Typescript 上下文状态未更新

1 个答案: