React函数组件传递多个props及TypeScript类型报错解决

报错根因 #

• 定义的AppPropType未声明api字段，TypeScript检测到传入未定义的属性触发报错
• React组件仅第一个参数为props对象，将api作为第二个参数属于错误写法，无法正确接收传值
• 当前index.ts中给App传入的api={false}类型和实际需要的字符串类型不匹配，且没有使用提前获取到的apiUrl变量

解决步骤 #

1. 修改App.tsx的类型定义与组件参数

调整AppPropType新增api字段，同时修正组件参数写法，从props中读取api：

type AppPropType =
    {
        isAuthenticated: boolean,
        token: string,
        api: string // 新增api字段声明
    }

// 移除第二个参数api，统一从props取属性
function App(props: AppPropType) {
    trace(`App.render()`)
    trace(props.api) // 改为从props获取api

    const Content = ()=> props.isAuthenticated? <Portal/> : <NonPortal />
    return (
        <section className="App">
            <Router>
                <Content />
            </Router>
        </section>
    )
}

2. 调整connect配置适配额外传参

你使用了redux的connect高阶组件，需要确保外部传入的api属性可以被正确识别，调整mapState2Props接收外部传入的自有属性：

// 新增第二个参数ownProps接收外部传的api
function mapState2Props(state: StoreType, ownProps: {api: string}): AppPropType {
    return {
        isAuthenticated: selector.isAuthenticated(state),
        token: selector.getToken(state),
        ...ownProps // 把外部传的api合并到返回的props里
    } as AppPropType
}

export default connect(mapState2Props)(App);

3. 修正index.ts中的传值

把原代码中错误的api={false}替换为你提前获取到的apiUrl变量：

ReactDOM.render(
  <React.StrictMode>
    <Provider store={appStore}>
      <QueryClientProvider client={queryClient}>
        <App api={apiUrl}/> {/* 传正确的api地址变量 */}
      </QueryClientProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

完成以上修改后报错即可解决，你可以在App组件内通过props.api正常读取meta标签中定义的接口地址。

内容的提问来源于stack exchange，提问作者Simple Fellow