Bagian React dari State Kosong di Dalam Render

Saya memiliki aplikasi reaksi/Redux. Masalahnya adalah saya ingin merender daftar elemen dalam status komponen saya dan daftar ini selalu kosong ketika metode render dijalankan dan saya tidak dapat menggunakannya.

Elemen ini berasal dari panggilan API.

Ini adalah komponen saya:

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

Daftar orang di negara bagian selalu kosong dalam metode render, tetapi daftar orang di props selalu baik-baik saja. Kenapa ini?

Bagaimana cara mengatur status agar berfungsi dengan render dan mulai menghapus orang dari daftar ini?


reactjs javascript redux react-redux ecmascript-6
person danielrvt    schedule 18.08.2018    source sumber
comment
parameter yang hilang di connect()   -  person xadm    schedule 18.08.2018
comment
@xadm Saya mendapatkan Uncaught ReferenceError: stateToProps is not defined ini ketika mengubahnya menjadi ini: connect(stateToProps)(PeopleView);   -  person danielrvt    schedule 18.08.2018
comment
Karena Anda harus membuat metode stateToProps.   -  person Nikhil Thakur    schedule 18.08.2018
comment
mengapa didefinisikan sebagai statis? memindahkannya keluar dari badan komponen   -  person xadm    schedule 18.08.2018

Jawaban (2)


arrow_upward
0
arrow_downward

Ada beberapa masalah secara umum pada kode Anda.

  1. this.state.people hanya diinisialisasi dalam konstruktor satu kali dari nilai this.props.people yang secara default adalah undefined jika Anda tidak memasukkan nilai. Perhatikan bahwa Anda tidak menggunakan this.state.people di mana pun dalam metode render Anda.
  2. Anda mencampurkan status komponen React dan status Redux. Status Redux diteruskan ke React sebagai props (biasanya melalui fungsi pemetaan yang disebut mapStateToProps, Anda dapat menyebutnya apa pun yang Anda inginkan). Fungsi pemetaan ini harus diteruskan ke connect(mapStateToProps)(PeopleView). Fungsi connect react-redux adalah fungsi kari.
  3. Berdasarkan konvensi, Anda sebenarnya tidak perlu menjadikan stateToProps sebagai metode statis kelas komponen. Biasanya, ini adalah level teratas (atau cakupan file) untuk fungsi tersebut.

Beri tahu saya jika saya dapat memperjelas jawaban saya lebih lanjut.

person light.wave    schedule 18.08.2018

arrow_upward
0
arrow_downward

Di sini, di konstruktor Anda:

constructor(props) {
    super(props);

/* Remove { } this brackets from the const variable and also you need props.people not props in it */
    const people  = props.people; 
    const sortedPeople = sortBy(people, 'birthday');

    this.state = {
      people: people,
      sortedPeople: sortedPeople,
      collapsed: true
    };
  }
person Nikhil Thakur    schedule 18.08.2018