道具在 `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;

道具在 `render` 函数内部工作时在 `render` 函数上方显示空值？

Props are showing empty value above `render` function while it work inside `render` function?

javascript

reactjs

react-props