在基于反应类的组件中将道具从父级传递给子级

Question

I am new to react and cannot figure out how to pass data received from the server from a parent component to a child component as such:

//parent component
class AlumniComponent extends React.Component {

    state = {
        profile : {},
        error: false
    }

    componentDidMount(){
        Axios.get('https://jsonplaceholder.typicode.com/users/1')
        .then(response=>{
            // console.log(response.data);
            this.setState({profile: response.data})
        })
        .catch(error=>{
            console.log(error);
            this.setState({error: true})        
        })
    }

    render() {

        const profile = this.state.profile;

        return(
            <AboutComponent data={profile} tab="about"/>
        );
    }

In my child component:

class AboutComponent extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            data: {
                name: props.data   // <--- the props are coming coming from the parent component !? 
            },
            selectedOption: null,
        };
    }

render (){

return (
      <Form.Control type="text" value={JSON.stringify(this.state.data)} disabled />
);
}

the input value comes out as empty object: {"name":{}}

Answer 1

I'd try to stay away from storing props inside of state so that your parent and children components don't get out of sync. Instead, use what you need from the props inside of children and then if you need to store some other information based on the props that are passed, use state for that.

Here's an example:

 class AlumniComponent extends React.Component { state = { profile: {}, isLoading: true, error: false }; componentDidMount() { fetch("https://jsonplaceholder.typicode.com/users/1") .then(res => res.json()) .then(data => { this.setState({ profile: data, isLoading: false }); }) .catch(error => { this.setState({ error: error.message, isLoading: false }); }); } render() { const { profile, isLoading, error } = this.state; if (isLoading) { return `Loading`; } if (!isLoading && error) { return `Something went wrong`; } return <AboutComponent data={profile} />; } } class AboutComponent extends React.Component { constructor(props) { super(props); const initialState = { name: this.props.data.name, selectedOption: null } this.state = { ...initialState } } handleChange = event => { this.setState({ name: event.target.value }); }; render() { const { name } = this.state; return <input type="text" value={name} onChange={this.handleChange} />; } } function App() { return ( <div className="App"> <AlumniComponent /> </div> ); } ReactDOM.render( <App />, document.getElementById("app") )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

Also, I don't know what the <Form.Control /> component is expecting for the value property, but make sure you grab the right information that you need instead of passing the entire prop/object into it.

class AboutComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: this.props.data.name
    }
  }

  handleChange = (event) => {
    this.setState({
      name: event.target.name
    })
  }

  render() {
    return (
      <Form.Control 
        type="text" 
        value={this.state.name} 
        onChange={this.handleChange}
        disabled 
      />
    )
  }
}

Answer 2

You forgot this this.props.data but this an anti pattern

 this.state = {
  data: {
    name: this.props.data,
  },
};

You should do it in componentDidMount()

componentDidMount(){
  this.setState({name:this.props.data.name})
}

Then:

 <Form.Control type="text" value={this.state.name} disabled />