Реагируйте: почему значение реквизита !!! * изменить * ¡¡¡?

Question

Я все еще учусь Реагировать, поэтому я еще не понимаю поведение. когда приложение запускает значение реквизита = неопределенное, но через несколько миллисекунд получает реквизиты из индекса. js .... почему это происходит? и как это предотвратить? Спасибо за ваши ответы. (Я показываю в консоли)

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

Приложение. 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
}

Answer 1

Вы должны развернуть компонент в индексе. js с реквизитами

, а PropType должен быть объектом, а не массивом.

пример:

https://codesandbox.io/s/admiring-lamport-pqj7x

надеюсь, что это поможет