Как я могу передавать данные из App.js к компонентам?

#javascript #reactjs

Вопрос:

У меня есть App.js и функциональный компонент «список загрузок». Я определил «кустид» в app.js и хотите передать его в компонент uploadlist. Вот моя попытка:

app.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} />}/> 
 

uploadlist.js:

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

Это, похоже, не сработало и возвращает неопределенное значение в консоли.
Как это можно решить?
Как проверить, правильно ли передан кустид из app.js?

Комментарии:

1. почему вы получаете доступ custId из match , просто напрямую переходите this.state.userid к custid свойству UploadList компонента

2. Как я могу это сделать? @Сурайшарма

Ответ №1:

Делай вот так

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

Ответ №2:

реквизит.совпадение.параметры.кустид

Это кажется неправильным, чтобы пройти. Внутри компонента рендеринга вашего приложения я бы изменил CustID={CustID}, потому что вы создаете и назначаете эту переменную чуть выше, и вам нужно передать ее в список загрузки компонентов.