打字稿 React 错误 - 参数'inside'隐式具有使用上下文的'any'类型

Question

我有一个context.tsx文件，它将用于跨组件共享数据。目前我得到的错误:

parameter 'inside' implicitly has an 'any' type.

我确定定义数组为任何是不好的做法，但不知道任何其他方式?

到目前为止我的代码是:

context.tsx

import React, {useEffect} from 'react';
import axios from 'axios';
export const DataContext = React.createContext({
data: '',
other: '',
item: [] as any
});
interface Iresponse {
userId: number,
id: number,
title: string,
completed: boolean,
};
export const DataProvider: React.FunctionComponent = ({children}) => {
const [data] = React.useState<string>('Example text 1);
const [other] = React.useState<string>('Example text 2');
const [item, setItem] = React.useState<Iresponse[]>([]);
const url = 'https://jsonplaceholder.typicode.com/posts';
// Global data axios call
useEffect (
() => {
let mounted = true;
const loadData = async (): Promise<any> => {
try {
const response = await axios (url);
if (mounted) {
setItem (response.data);
console.log('data mounted')
}
} catch (err) {
console.log (err);
}
};
loadData ();
return () => {
mounted = false;
console.log ('cleaned');
};
},
[url]
);

return (
<DataContext.Provider value={{data, other, item}}>
{children}
</DataContext.Provider>
);
};

在使用上下文的其他组件中。

import React from 'react';
import {DataContext} from '../../context/Context';
interface Iresponse {
userId: number,
id: number,
title: string,
completed: boolean,
};
const Comp1: React.FunctionComponent = () => {
const {data, other, item} = React.useContext(DataContext);

const mappInner: React.FunctionComponent<Iresponse[]> = () => {
return (
item.map(inside => {
<ul key={inside.id}>
<li>{inside.title}</li>
</ul>
})
)
}
return (
<>
<h1>{other}</h1>
<p>{data}</p>
{mappInner}
</>
) 
}
export default Comp1;

知道的吗?

Answer 1

所以看起来我必须为上下文定义一个类型和一些默认值:

interface Iresponse {
userId: number,
id: number,
title: string,
completed: boolean,
};
interface ContextData {
item: Iresponse[],
data: string,
other: string
}
export const DataContext = React.createContext<ContextData>({
item: [],
data: '',
other: '',
});

然后映射到消费者:

{item.map(inner => {
return (
<p>{inner.title}</p>
)
})}

Answer 2

如果内部对象只有id和title属性，那么你应该在你的接口中这样定义它们:

export interface Inside {
id: string;
title: string;
}

，然后将类型传递给参数:

item.map((inside:Inside) => ...

或者更好的是，在props接口中定义你的项目:

export const DataContext = React.createContext({
data: '',
other: '',
item: {id:string, title:string}[] 
});