Javascript 反应：为什么道具的价值*改变*¡¡¡；？

我还在学习如何反应，所以我还不了解这种行为。 当应用程序开始时，props值=未定义，但几毫秒后从index.js接收props。。。。为什么会发生这种情况？我们应该如何防止这种情况？谢谢你的回答。 （我在控制台中显示）

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

class Apps extends Component{
  state ={
    posts : []
  }

  async componentDidMount (){
    const peticion = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await peticion.json();
    this.setState((state) =>({
      posts : data
    }));
  }

  render(){
    return(
      <div>
        <App posts={this.state}/>
      </div>
    );
  }
}
ReactDOM.render(
  <React.StrictMode>
    <Apps />
  </React.StrictMode>,
  document.getElementById('root')
);

import React，{Component}来自'React'；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
类应用程序扩展组件{
陈述={
员额：[]
}
异步组件didmount（）{
const peticion=等待取数（'https://jsonplaceholder.typicode.com/posts');
const data=wait peticion.json（）；
this.setState（（状态）=>({
员额：数据
}));
}
render（）{
返回(
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

App.js

import React, { Component } from 'react';
import './App.css';
import propTypes from 'prop-types';

export default class App extends Component {

  render (){
    console.log(this.props)

    return(
      <div>
        dialogo
      </div>
    );
  }
}

const comment = {
  background : 'grey',
  border: '5px solid red',
  borderRadius : ' black',
}
const btnDelete = {
  cursor : 'pointer',
  background : 'red',
  fontSize : '2rem',
  borderRadius : '50px',
  float : 'right'
}
App.propTypes = {
  props : propTypes.array.isRequired
}

import React，{Component}来自'React'；
导入“/App.css”；
从“道具类型”导入道具类型；
导出默认类应用程序扩展组件{
渲染（）{
console.log（this.props）
返回(
对话
);
}
}
常量注释={
背景：“灰色”，
边框：“5px纯红”，
边界半径：“黑色”，
}
常数btnDelete={
光标：“指针”，
背景：“红色”，
fontSize:'2rem'，
边界半径：“50px”，
浮动：“对”
}
App.propTypes={
道具：需要propTypes.array.isRequired
}

您应该使用道具在index.js中钻取组件

和PropType应该是对象而不是数组

例如：

希望这有帮助

---

我刚刚试过，没有未定义的日志记录。你确定吗？因为我在控制台里看到了