如何在反应离子中将道具从一个组件传递到另一个组件

Question

我将道具从Login组件传递到StoreView组件。 当我通过道具时，出现 typescript 错误。

TypeScript 错误：类型'{数据：调度>; }' 不可分配给类型“IntrinsicAttributes”。 类型“IntrinsicAttributes”上不存在属性“数据”。

我的登录组件

import React, { useState } from "react";
//more imports

const Login: React.FC = () => {
  //some states
  const [storeData, setStoreData] = useState([]);

  const loginUser = (event: any) => {
    event.preventDefault();
    const loginApi = LoginAPI.userLogin(userEmail, password);
    loginApi
      .then((res) => {
        if (res) {
          setStoreData(res.store_id)
        }
        else {
          alert('invalid user')
        }
      })
  };

  return (
    <IonPage>
      <IonContent>
      <div className="login-container">    
        <div className="login-form-wrapper">
          Login please
          <form className="login-form" onSubmit={loginUser}>
            //my form data
          </form>
        </div>
      </div>
      </IonContent>
      <StoreView 
       //here i am getting error
       data = {setStoreData}
      />
    </IonPage>
  );
};
export default Login;

我想将我的道具传递给StoreView组件，但在登录组件中出现错误。

我的StoreView组件。

import React, { useEffect, useState } from 'react';
//more imports

const StoreView: React.FC = () => {
    return (
      <IonContent>
          //here i want to my props data
       </IonContent>
    ); 
}  

export default StoreView;

Answer 1

您必须为 StoreView 组件定义道具类型。

type Props = {
    // do not use `any`, I don't know the structure of your data
    // you should create an interface suitable for the type of data you want
    data: any[];
}

const StoreView = ({ data }: Props) => {
    return (
      <IonContent>
          // do something with data
       </IonContent>
    ); 
}

然后你可以像在你的例子中一样使用它（但你可能应该在那里传递storeData ，而不是setStoreData ）。

Answer 2

对于这个小例子，我建议使用 React.Context 来管理两个组件之间的 state。

这是一篇使用 reactjs 和 ionic framework 的博客文章。

我还建议您查看React.Context API 文档

import React, { useState } from "react";
//more imports

const Login: React.FC = () => {
  //some states
  const { storeData, setStoreData } = React.useContext(AppContext);

  const loginUser = (event: any) => {
    event.preventDefault();
    const loginApi = LoginAPI.userLogin(userEmail, password);
    loginApi
      .then((res) => {
        if (res) {
          setStoreData(res.store_id)
        }
        else {
          alert('invalid user')
        }
      })
  };

  return (
    <IonPage>
      <IonContent>
      <div className="login-container">    
        <div className="login-form-wrapper">
          Login please
          <form className="login-form" onSubmit={loginUser}>
            //my form data
          </form>
        </div>
      </div>
      </IonContent>
      <StoreView 
       //here i am getting error
       // data = {setStoreData} <== this is wrong?
      />
    </IonPage>
  );
};
export default Login;

import React, { useEffect, useState } from 'react';
//more imports

const StoreView: React.FC = () => {
    const { storeData } = React.useContext(AppContext);
    return (
      <IonContent>
          //here i want to my props data
       </IonContent>
    ); 
}  

export default StoreView;