使用 Typescript 将 JSON 文件读入 React Context Provider

Question

我的 React Typescript 应用程序有一个 Context Provider DataProvider ，它可以从 JSON 文件中读取一个值并在 Context useData()中提供它。 我正在尝试同步读取以避免处理isLoading ，因为这是一个很小的本地 JSON 文件。

是否有推荐的方法在 Context Provider 中同步读取 JSON 文件？

我使用node-sync尝试了以下操作，但它给出了 Typescript 错误

对象可能是“未定义”.ts(2532)

在线data

return data.find(...

尝试将其更改为

return data?.find(...`

但现在错误是

“从不”类型上不存在属性“查找”.ts(2339)

import React, {
    createContext,
    useContext,
    Consumer,
    Context,
    ReactNode,
    useMemo,
  } from 'react';
  
import Sync from 'sync';

export interface DataProviderProps {
    children: ReactNode;
}
  
export interface Data {
    secretNumber?: string;
}

// @ts-ignore
const DataContext: Context<Data> = createContext<Data>();

export function DataProvider({ children }: DataProviderProps) {
    const secretNumber = useMemo(() => {

      // Read from JSON file
      const contractFile =
        process.env.REACT_APP_WORLD === 'main'
          ? '../main.json'
          : '../test.json';
      let data;
      Sync(function () {
        data = import(contractFile);
      });
  
      return data.find( // <=== TS error: Object is possibly 'undefined'.  ts(2532)
        ({ name }: { name: string }) => name === 'elonmusk',
      )?.secretNumber;
    }, []);
  
    const states = useMemo<Data>(() => {
      return {
        secretNumber,
      };
    }, [secretNumber]);
  
    return (
      <DataContext.Provider value={states}>
        {children}
      </DataContext.Provider>
    );
  }

export function useData(): Data {
    return useContext(DataContext);
}
  
export const DataConsumer: Consumer<Data> = DataContext.Consumer;

Answer 1

array.find() 返回 undefined 如果没有值满足测试功能，来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find ，所以只需添加 (!)在 array.find() 之后！ fxn 以确定一个值将被返回。

sample code stub
data.find(todoCodeStubhere)!