Reactjs 在React中通过道具传递用户id

我是新来的。我有App.jsx：

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import axios from 'axios';

import About from './components/About';
import NavBar from './components/NavBar';
import Form from './components/forms/Form';
import Logout from './components/Logout';
import UserStatus from './components/UserStatus';
import Seeds from './components/Seeds';
import Message from './components/Message';


class App extends Component {
  constructor() {
    super();
    this.state = {
      users: [],
      title: 'Project',
      isAuthenticated: false,
      messageName: null,
      messageType: null,   
    };
    this.logoutUser = this.logoutUser.bind(this);
    this.loginUser = this.loginUser.bind(this);
    this.createMessage = this.createMessage.bind(this);
    this.removeMessage = this.removeMessage.bind(this);
  };
  componentWillMount() {
    if (window.localStorage.getItem('authToken')) {
      this.setState({ isAuthenticated: true });
    };
  };
  componentDidMount() {
    this.getUsers();
  };
  getUsers() {
    axios.get(`${process.env.REACT_APP_WEB_SERVICE_URL}/users`)
    .then((res) => { this.setState({ users: res.data.data.users }); })
    .catch((err) => { });
  };
  logoutUser() {
    window.localStorage.clear();
    this.setState({ isAuthenticated: false });
  };
  loginUser(token) {
    window.localStorage.setItem('authToken', token);
    this.setState({ isAuthenticated: true });
    this.getUsers();
    this.createMessage('Welcome', 'success');
  };
  createMessage(name='Sanity Check', type='success') {
    this.setState({
      messageName: name,
      messageType: type
    });
    setTimeout(() => {
      this.removeMessage();
    }, 3000);
  };
  removeMessage() {
    this.setState({
      messageName: null,
      messageType: null
    });
  };
  render() {
    return (
      <div>
        <NavBar
          title={this.state.title}
          isAuthenticated={this.state.isAuthenticated}
        />
        <section className="section">
          <div className="container">
            {this.state.messageName && this.state.messageType &&
              <Message
                messageName={this.state.messageName}
                messageType={this.state.messageType}
                removeMessage={this.removeMessage} 
              />
            }
            <div className="columns">
              <div className="column is-half">
                <br/>
                <Switch>
                  <Route exact path='/' render={() => (
                    <SpotifyAuth
                    />
                  )} />
                  <Route exact path='/about' component={About}/>
                  <Route exact path='/register' render={() => (
                    <Form
                      formType={'Register'}
                      isAuthenticated={this.state.isAuthenticated}
                      loginUser={this.loginUser}
                      createMessage={this.createMessage} 
                    />
                  )} />
                  <Route exact path='/login' render={() => (
                    <Form
                      formType={'Login'}
                      isAuthenticated={this.state.isAuthenticated}
                      loginUser={this.loginUser}
                      createMessage={this.createMessage} 
                    />
                  )} />
                  <Route exact path='/logout' render={() => (
                    <Logout
                      logoutUser={this.logoutUser}
                      isAuthenticated={this.state.isAuthenticated}
                    />
                  )} />
                  <Route exact path='/status' render={() => (
                    <UserStatus
                      isAuthenticated={this.state.isAuthenticated}
                    />
                  )} />
                  <Route exact path='/seeds' render={() => (
                    <Seeds
                      isAuthenticated={this.state.isAuthenticated}
                    />
                  )} />
                </Switch>
              </div>
            </div>
          </div>
        </section>
      </div>
    )
  }
};

export default App;

---

我试图通过

props

（

this.props.getUserStatus.id

）获取id，但是我得到了

未定义的
。如何在此处将我的user.id传递给Seeds.jsx组件？
传递给Seeds的唯一属性是
isAuthenticated
传递给Seeds的唯一属性是
isAuthenticated
首先，您可能希望使用类似redux的存储来进行状态管理。如果你真的想让你的状态保持在本地，那么你应该“提升它”，并将你的getUserStatus（）函数移到最高的父函数中（在你的例子中是App.js）。然后在App.js中，将userStatus对象设置为状态，并将其传递给所有需要它的组件

<Route exact path='/seed' render={() => (
   <Seed
     ....
     userStatus={this.state.userStatus} 
   />
)} />

首先，您可能希望使用redux之类的存储进行状态管理。如果你真的想让你的状态保持在本地，那么你应该“提升它”，并将你的getUserStatus（）函数移到最高的父函数中（在你的例子中是App.js）。然后在App.js中，将userStatus对象设置为状态，并将其传递给所有需要它的组件

<Route exact path='/seed' render={() => (
   <Seed
     ....
     userStatus={this.state.userStatus} 
   />
)} />

您没有将
getUserStatus
道具传递给
。您没有将
getUserStatus
道具传递给
。那么我在哪里传递它呢？这就是传递属性的方式。我明白了。我佩服你的简洁，但你的评论太笼统了。我在上面使用了非常具体的代码。你能提供一个具体的解决方案吗？那我在哪里通过呢？这就是传递属性的方式。我明白了。我佩服你的简洁，但你的评论太笼统了。我在上面使用了非常具体的代码。你能提供一个具体的解决方案吗？
import React, { Component } from 'react';
import axios from 'axios';


class Seeds extends Component{
  constructor (props) {
    super(props);
    this.state = { 
        restaurant:'',      
        email: '',
        id: '',
        username: '',
        active: '',
        admin: '',
        template:'',
      formSeeds:{
        type1:'',
        type2:'',
        type3:'',
      },
      formEditMenu:{
        item:'',
        item2:'',
        item3:'',
      }
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmitSeeds = this.handleSubmitSeeds.bind(this);
    this.handleSubmitCoffees = this.handleSubmitCoffees.bind(this);
  };
  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getSeeds();
    }
  };
  getSeeds(event) {
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/seeds/${this.props.getUserStatus.id}`, //HERE
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => {
      console.log(res.data.data)
      this.setState({
        restaurant: res.data.data[0].restaurant,
        id: res.data.data[0].id,
        template: res.data.data[0].content
      })
      console.log(res.data.data[0].id);
    })    
    .catch((error) => { console.log(error); });
  };
  handleChange(event){
    const objformSeeds = this.state.formSeeds;
    objformSeeds[event.target.name] = event.target.value;
    this.setState(objformSeeds);

    const formEditMenu = this.state.formEditMenu;
    formEditMenu[event.target.name] = event.target.value;
    this.setState(formEditMenu);
    }
  handleSubmitSeeds(event) {
    event.preventDefault();
    //const formSeeds = this.props.formSeeds
    const data = {
      type1: this.state.formSeeds.type1,
      type2: this.state.formSeeds.type2,
      type3: this.state.formSeeds.type3,
    };
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/handle_seeds`;
    axios.post(url, data)
      .then((res) => {
        console.log(data);
      })
      .catch((err) => {
      });
  };
  handleSubmitCoffees(event) {
    event.preventDefault();
    //const formEditMenu = this.props.formEditMenu
    const data = {
      item:  this.state.formEditMenu.item,
      item2: this.state.formEditMenu.item2,
      item3: this.state.formEditMenu.item3,
    };
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/edit_menu${this.props.getUserStatus.id}`; //AND HERE
    axios.post(url, data)
      .then((res) => {
        console.log(data);
      })
      .catch((err) => {
      });
    };

    render(){

        //var seeds_page = this.state.template;
        var __html = this.state.template;
        var template = { __html: __html };

        return (
           <div id="parent">
            <div dangerouslySetInnerHTML={template}/>
              <form>
                <input type='text' name='name' onChange={this.handleChange}/><br/>
                <button type="button" onClick={this.handleSubmitCoffees} />
              </form>
          </div>
        );
    }
}

export default Seeds;

<Route exact path='/seed' render={() => (
   <Seed
     ....
     userStatus={this.state.userStatus} 
   />
)} />

....
render(){
  const { userStatus } = this.props
  return(
    ......
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/edit_menu${userStatus.id}`;


  )
}