Javascript 道具在“render”函数中工作时，在“render”函数上方显示空值？

因此，我将道具从

app.js

传递到

state.jsx

，但在控制台记录道具时，它给了我一个

未定义的

，但它在

渲染

函数中完美地工作。为什么会这样

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

类应用程序扩展了React.Component{
状态={
数据：{}，
国家：“，
}
异步组件didmount（）{
const dataFromApi=wait StateData（）；
this.setState（{data:dataFromApi}）
}
handleStateChange=异步（状态）=>{
const fetchedData=等待状态数据（状态）；
this.setState（{data:fetchedData，states:states}）
}
render（）{
const{data，states}=this.state；
控制台日志（数据）；
返回(
);
}
}

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

导出默认类StateCard扩展React.Component{
建造师（道具）{
//这不管用
超级（道具）
const dta=this.props.data.confirm
控制台日志（dta）
}
//间距deafult值为8px，因此3*8=24px宽度列
render（）{
//这很有效
console.log（this.props.data.confirmed）
console.log（this.props.states）
const{已确认、活动、死亡、恢复}=this.props.data
返回(
已确认：{已确认}
);}
}

您可以使用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;

import React，{useffect}来自“React”；
const StateCard=props=>{
const{data，states}=props；
const{已确认、活动、死亡、恢复}=数据；
useffect（（）=>{
控制台日志（已确认）；
控制台日志（状态）；
}[道具]；
返回(
已确认：{已确认}
);
};
导出默认状态卡；