React：为什么 props 的 value !!!*change*¡¡¡

Question

我还在学习 React，所以我还不理解这种行为。 当应用程序开始时道具值 = 未定义，但几毫秒后从 index.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')
);

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
}

Answer 1

你应该使用 props 在 index.js 中钻取组件

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

示例：

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

希望对你有帮助