React Context：如何将它与对象一起使用答案

【问题标题】：React Context : How to use it with object(s)React Context：如何将它与对象一起使用
【发布时间】：2021-10-28 20:22:24
【问题描述】：

我正在使用 Ionic react 开发一个多路由应用程序。由于我在一个页面上获取数据，然后切换到另一个页面然后显示......（也许不是最好的）

上下文似乎是一个更好的主意。问题，我想不通我做错了什么......

LabelContext.js

export default React.createContext({
    label: {},
    updateLabel: label => {}
});

App.tsx

import Label from './models/label';
import LabelContext from './helpers/LabelContext';
export default function App() {

  const [label, setLabel] = useState<Label[]>([]);
  const contextValue = {
    label,
    updateLabel: setLabel
  }
  
   return (
    <LabelContext.Provider value={contextValue}>
    <IonApp>
     ...
    </IonApp>
  </LabelContext.Provider>
   );
 }

一个组件

  const { label, updateLabel } = useContext(LabelContext);
  return (
    <div className="body">
      <div className="ag-theme-alpine full-size">
           <AgGridReact
               rowData={label}>
               ...
           </AgGridReact>
       </div>
    </div>
  );
};

错误：

类型“{}”不可分配给类型“any[]”

这不起作用：

export default React.createContext({
    label: Label[],
    updateLabel: label => {}
});

谢谢

【问题讨论】：

我假设这是一个打字稿错误，你从哪里得到那个错误，哪一行/文件
对于第一种情况，我收到此部分的错误：owData={label}> 第二种情况：LabelContext.js: Unexpected token (5:17)

标签： reactjs ionic-framework

【解决方案1】：

CreatContext 需要一个默认值而不是类型。您可以删除传递给 CreatContext 的对象，也可以为每个对象指定一个默认值。 export default React.createContext({ label: Label[]=[], updateLabel=()=> {} });

【讨论】：

很高兴它对您有用。您可以接受它作为答案。