道具在‘`render`’函数上显示空值，而在‘`render`’函数中工作？

Question

因此，我将道具从app.js传递到state.jsx，但是当控制台记录道具时，它给了我一个undefined，但它在render函数中完美地工作。为什么会这样？

App.js

class App extends React.Component{

  state = {
    data : {},
    states: '',
}

async componentDidMount () {
    const  dataFromApi = await StateData();
    this.setState({ data: dataFromApi})
}

handleStateChange = async(states) => {
    const  fetchedData = await StateData(states);
    
    this.setState({data: fetchedData, states: states})
    
}
  render(){
    const {data, states} = this.state;
    console.log(data);
    return (
      <div className="App">
        <StateCard data={data} states={states}/>
      </div>
    );
  }
}

State.jsx

export default class StateCard extends React.Component{

        constructor(props) {
//this doesn't work
          super(props)
          const dta = this.props.data.confirmed
          console.log(dta)
         
        }

        // spacing deafult value is 8px , so the 3*8=24px width column

        render(){

//This works
          console.log(this.props.data.confirmed)
          console.log(this.props.states)
          const {confirmed,active, deaths, recovered} = this.props.data
           return (
            <div>
             <span>Confirmed : {confirmed}</span>
            </div>);}
}

Answer 1

您可以使用useEffect和Function代替React.Component。它比使用componentdidMount和其他生命周期方法更容易。

import React, { useEffect } from "react";

const StateCard = props => {
  const { data, states } = props;
  const { confirmed, active, deaths, recovered } = data;

  useEffect(() => {
    console.log(confirmed);
    console.log(states);
  }, [props]);

  return (
    <div>
      <span>Confirmed : {confirmed}</span>
    </div>
  );
};

export default StateCard;