передача реквизита от родителя к ребенку в компоненте класса «реагировать»

Question

Я новичок в реакции и не могу понять, как передать данные, полученные от сервера от родительского компонента, к дочернему компоненту, например:

//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"/>
        );
    }

В моем дочернем компоненте:

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 />
);
}

входное значение выглядит как пустой объект: {"name": {}}

Answer 1

Я бы постарался не хранить props внутри state, чтобы ваши parent и children компоненты не выходили из строя c. Вместо этого используйте то, что вам нужно, из props внутри children, а затем, если вам нужно сохранить некоторую другую информацию, основанную на переданных props, используйте для этого state.

Вот пример:

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>

Кроме того, я не знаю, что ожидает компонент <Form.Control /> для свойства value, но убедитесь, что вы получаете правильную информацию, которую вы нужно вместо того, чтобы передавать в него всю опору / объект.

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

Вы забыли это this.props.data, но это анти-шаблон

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

Вы должны сделать это в componentDidMount()

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

Тогда:

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