在React Context中声明接口时，类型上不存在属性

Question

我正在创建一个应用程序，该应用程序需要在组件之外设置一个状态，但从另一个组件读取当前状态。除了Typscript之外，我还在为我的解决方案使用react上下文，但很难导航我的Type Errors。

这是我的代码：

我在我的主要组件中声明我的接口如下：

interface ErrProvider {
LocalName?: string,
}

interface formContextType {
LocalErrValue: { localErr: Array<any>, setLocalErr: Dispatch<SetStateAction<Array<any>>> }
errValue: { errors: Array<ErrProvider>, setErrors: Dispatch<SetStateAction<Array<ErrProvider>>> }
}

这是初始化：

export const formContext = createContext<formContextType>({
errValue: {
errors: [], setErrors: () => {
}
},
LocalErrValue: {
localErr: [], setLocalErr: () => {
}
},
});

这是应用

export const MyApp = () => {
const [localErr, setLocalErr] = useState(Array<any>);
const LocalErrValue = {localErr, setLocalErr}

const [errors, setErrors] = useState(Array<ErrProvider>);
const errValue = {errors, setErrors}
function submitCheck(): void {
setErrors(localErr)
} 
return (
<formContext.Provider value={{ifaErrValue, errValue}}>
<LocalErrors/
<button        
onClick={submitForm}
>
<p>Make Reservation</p>
</button>
</formContext.Provider>
)
};

正如您在上面看到的，我希望在单击按钮时将本地错误设置为我的全局状态。

接口LocalFormFields{LocalName？：一串}

export LocalErrors=((=>｛

const {LocalErrValue, errValue} = useContext(formContext);
const {localErr, setLocaErr} = ifaErrValue
const {errors, setErrors} = errValue
const [localForm, setLocalForm] = useState<IFAFormFields>({});
function setField(field: string, value: string | number) {
// set member of form state
setlocalForm({
...localForm,
[field]: value,
});
}
function validateForm(): any {
const newErrors: any = {};
if (!localForm.AdvisorName || loccalForm.AdvisorName === "")
newErrors.AdvisorName = `Please enter first name`;
return newErrors;
}
useEffect(() => {
setLocalErr(validateForm())
}, [localForm]);
return  <div>
<Form.Group
controlId="formBasicEmail"
>
<Form.Control
type="name"                               
placeholder="Local Name"
onChange={(e) =>
setField(" LocalName", e.target.value)
}
/>
</Form.Group>
<p>
{errors.LocalName}
</p>
</div>

正如您在上面看到的，我想从本地组件验证表单，然后将这些本地错误设置为全局错误状态。

问题是当我试图从这个全局错误状态显示时，会出现打字脚本错误

TS2339: Property 'LocalName' does not exist on type 'ErrProvider[]'.

我在这里的界面中提供LocalName：

interface ErrProvider {
LocalName?: string,
}

为什么现在会抛出TypeScript错误？

Answer 1

您的ErrProvider数组没有LocalName属性，只有个别ErrProviders具有。如果您想访问数组中每个ErrProvider的LocalName，可以映射到它们上。