如何使用React/Typescript传递props ?

Question

我有一个使用React, React-redux的网站，现在我正在将其转换为Typescript，但我不能。我有这个:

Login.tsx

....
import ValidationErrors from 'components/ValidationErrors'
import { useAppDispatch, useAppSelector } from 'store/hooks';
function Login() {

...
...
const errors = useAppSelector(state =>state.error) 
return (        
<div className="login">                     
....
{ errors.errors.length &&                                             
<ValidationErrors errors={errors} />                    
}
...
</div>
)
}

组件/ValidationErrors.tsx

import React from 'react';
import Errors from 'interfaces/Errors';

function ValidationErrors( {errors}: Errors ) {            
return (                
<div>
<div className="font-medium text-red-600">{errors.message}</div>                
<ul className="mt-3 list-disc list-inside text-sm text-red-600">
{Object.keys(errors.errors).map(function (key, index) {                        
return <li key={index}>{errors.errors[key]}</li>;
})}
</ul>
</div>        
);
}
export default ValidationErrors

接口/Errors.ts

export default interface Errors {
message:string | null,
errors: {
[key:string]:string[]        
}
}

这是当出现错误时后端发送的json格式:

{消息":"给定的数据无效。"errors" {这些凭证与我们的记录不符。[&;]}}

我得到两个打字错误:

{种(errors.errors)。map(function (key, index) {
返回{errors.errors[key)]} ;})}

(parameter) key: string元素隐式具有'any'类型，因为索引表达式不是'number'类型。ts(7015)

:

& lt; ValidationErrors错误={错误}/祝辞

(财产)错误。错误:{[key: string]: string[];}类型"Errors"不能赋值给类型"{[key: string]: string[];}"。类型'string'的索引签名为在"Errors"类型中丢失。ts(2322)错误。ts(3,5):期望的类型来自于type上声明的属性errors"IntrinsicAttributes,错误'

这是错误减少器:store/reducers/errorReducer.ts

import Errors from 'interfaces/Errors'
import {Action, ActionType} from 'store/types'
const initialState: Errors = {
message: null,
errors: {
'':['']
}   
}
export const errorReducer = (state : Errors = initialState, action: Action): Errors =>{
switch(action.type){
case ActionType.SET_ERROR:          
return {
message: action.payload.message,
errors: action.payload.errors
}                   
default:
return state
}
} 

和这个我的全局reducer: store/reducers/index.ts

import {combineReducers} from 'redux'
...
...
import {errorReducer} from './errorReducer'

const rootReducer = combineReducers({
.....
error: errorReducer
})
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

这是我的商店:store/store.ts

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import reducer from './reducers'
export const store = configureStore({
reducer
});
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>;

我做错了什么?谢谢。

Answer 1

我认为有两种方法来解决这个问题，

1. 不要解构函数的参数并参考Errors接口

   function ValidationErrors(errors: Errors) {
   }
   

2. 提供有关解构参数的每个值的信息。

   function ValidationErrors({ message, errors }: { message: string | null, 
   errors: { [key: string]: string[] } }) {
   }