如何將數據從 App.js 傳遞到組件？

Question

我有 App.js 和一個“上傳列表”功能組件。 我在 app.js 中定義了一個“custid”，並希望將其傳遞給 uploadlist 組件。 這是我的嘗試：

應用程序.js：

export default class App extends Component {

  state = {

    userrole : '',
    userid   : ''

  };

componentDidMount() {

  if(localStorage.login)
  {
    const currentuser     = JSON.parse(atob(localStorage.login.split(".")[1])); 
    this.setState( {userrole: currentuser.role });
    this.setState( {userid: currentuser.id });
    
  }

}

render() {

if(this.state.userrole === "Customer"){
  const custid=this.state.userid;
  console.log(custid); //This properly returns the custid in console.
return (
//some code
<Route path="/Uploadlist" render={props => <UploadList custid={props.match.params.custid} />}/> 

上傳列表.js：

export default function Uploadlist({custid}) {
    console.log(custid);

這似乎不起作用並在控制台中返回 undefined 。 這要如何解決？ 如何檢查 custid 是否從 app.js 正確傳遞？

Answer 1

這樣做

<Route path="/Uploadlist" render={props => <UploadList custid={this.state.userid} />}/>

Answer 2

props.match.params.custid

這似乎不正確。 在您的 App 渲染組件中，我將更改 custId={custId} 因為您在上面創建並分配了該變量，並且您需要將其傳遞給組件上傳列表。