亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在上下文使用者上使用 useContext() 時反應上下文“屬性‘狀態’不存在”

在上下文使用者上使用 useContext() 時反應上下文“屬性‘狀態’不存在”

慕碼人8056858 2022-06-16 11:01:44
你有想念' td' $('#' + rowId)將是$('#' + rowId+ ' td') $('#' + rowId+ ' td').each(function() {     $('td').css('border-top', '1px solid #7f7f7f'); });我正在嘗試在我的 React 項目中實現上下文。每次我嘗試實現這個上下文時,我都會得到同樣的錯誤:Property 'state' does not exist on type '{ count: number; currentColor: string; }'.  > 40 |   let { state, dispatch } = React.useContext(ContextOne);       |         ^上下文提供程序代碼:import * as React from "react";let ContextOne = React.createContext(initialState);let initialState = {  count: 10,  currentColor: "#bada55"};let reducer = (state, action) => {  switch (action.type) {    case "reset":      return initialState;    case "increment":      return { ...state, count: state.count + 1 };    case "decrement":      return { ...state, count: state.count - 1 };    case "set-color":      return { ...state, currentColor: action.payload };  }};function ContextOneProvider(props) {  let [state, dispatch] = React.useReducer(reducer, initialState);  let value = { state, dispatch };  return (    <ContextOne.Provider value={value}>{props.children}</ContextOne.Provider>  );}let ContextOneConsumer = ContextOne.Consumer;export { ContextOne, ContextOneProvider, ContextOneConsumer };我嘗試了許多在線示例上下文提供程序,但每次調用 useContext() 時,都會出現相同的錯誤。需要修改哪些內容才能使 Context 正常工作?
查看完整描述

2 回答

?
慕娘9325324

TA貢獻1783條經驗 獲得超4個贊

createContext參數類型應與您的值ContextOne.Provider類型匹配。您還需要改進您的類型以指導更多的TypeScript編譯器:


import * as React from "react";


type State = {

  count: number

  currentColor: string

}


const initialState: State = {

  count: 10,

  currentColor: "#bada55",

};


type Context = {

  state: State

  dispatch: React.Dispatch<State>

}


const ContextOne = React.createContext<Context>({

  state: initialState,

  dispatch: () => {},

});


// You need to define the type Action

const reducer: React.Reducer<State, Action> = (state, action) => {

  switch (action.type) {

    case "reset":

      return initialState;

    case "increment":

      return { ...state, count: state.count + 1 };

    case "decrement":

      return { ...state, count: state.count - 1 };

    case "set-color":

      return { ...state, currentColor: action.payload };

  }

};


function ContextOneProvider(props) {

  const [state, dispatch] = React.useReducer(reducer, initialState);

  const value: Context = { state, dispatch };


  return (

    <ContextOne.Provider value={value}>{props.children} </ContextOne.Provider>

  );

}


let ContextOneConsumer = ContextOne.Consumer;


export { ContextOne, ContextOneProvider, ContextOneConsumer };


查看完整回答
反對 回復 2022-06-16
?
慕標5832272

TA貢獻1966條經驗 獲得超4個贊

您的問題是您正在向具有屬性的上下文提供者提供初始狀態countand currentColor,而您提供的值(新狀態)ContextOneProvider具有屬性stateand dispatch。


我想您會希望將 initialState 交換為以下內容:


{

  state: null,

  dispatch: null,

}

如果您使用的是打字稿,您可能希望提供一個將這些作為可選參數的接口。


查看完整回答
反對 回復 2022-06-16
  • 2 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號