React Part of State ว่างเปล่าภายใน Render

ฉันมีแอป react / Redux ปัญหาคือฉันต้องการแสดงรายการองค์ประกอบในสถานะของส่วนประกอบของฉัน และรายการนี้ว่างเปล่าเสมอเมื่อมีการดำเนินการวิธีการเรนเดอร์และฉันไม่สามารถใช้งานได้

องค์ประกอบนี้มาจากการเรียก API

นี่คือองค์ประกอบของฉัน:

class PeopleView extends Component {

  static propTypes = {
    people: PropTypes.array,
    view: PropTypes.string
  }

  static stateToProps = state => ({
    people: state.properties.items || [],
    sortedPeople: sortBy(state.people.items || [], 'birthday'),
  })

  constructor(props) {
    super(props);
    const { people } = props;
    const sortedPeople = sortBy(people, 'birthday');

    this.state = {
      people: people,
      sortedPeople: sortedPeople,
      collapsed: true
    };
  }    

  toggleCollapsed = (e) => {
    this.setState({collapsed: !this.state.collapsed});
  }

  deleteHandler = (id) => {
    console.log("Person Id", id)    
  }

  render() {

    // THIS IS EMPTY: this.state.people = [] 
    // THIS IS NOT EMPTY: this.props.people = [{...}, {...}, {...}, ...]

    const sortedPeople = sortBy(this.props.people, 'createdAt');
    const sortedPeopleElements = this.props.sortedPeople.map((p, i) => {
      return <li key={p.id}>
        <Person index={i} id={p.id} name={p.name} onDelete={this.deleteHandler} />              
      </li>
    });    

    return (
      <div>
        <ul>
         {sortedPeopleElements}                  
        </ul>
      </div>
    );
  }
}

export default connect(PeopleView);

รายการผู้คนในสถานะจะว่างเปล่าเสมอในวิธีการเรนเดอร์ แต่รายการผู้คนในอุปกรณ์ประกอบฉากนั้นใช้ได้เสมอ ทำไมเป็นเช่นนี้?

ฉันจะตั้งค่าสถานะให้ทำงานกับการเรนเดอร์และเริ่มลบบุคคลออกจากรายการนี้ได้อย่างไร