Часть состояния React пуста внутри рендеринга

У меня есть приложение 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);

Список людей в состоянии всегда пуст в методе рендеринга, но список людей в свойствах всегда в порядке. Почему это?

Как мне настроить состояние для работы с рендером и начать удалять людей из этого списка?


reactjs javascript redux react-redux ecmascript-6
person danielrvt    schedule 18.08.2018    source источник
comment
отсутствующие параметры в connect()   -  person xadm    schedule 18.08.2018
comment
@xadm Я получаю это Uncaught ReferenceError: stateToProps is not defined при замене на это: connect(stateToProps)(PeopleView);   -  person danielrvt    schedule 18.08.2018
comment
Потому что вам придется создать метод stateToProps.   -  person Nikhil Thakur    schedule 18.08.2018
comment
почему определяется как статический? переместить его из тела компонента   -  person xadm    schedule 18.08.2018

Ответы (2)


arrow_upward
0
arrow_downward

В вашем коде есть несколько проблем.

  1. this.state.people инициализируется в конструкторе только один раз из значения this.props.people, которое по умолчанию равно undefined, если вы не передали значение. Обратите внимание, что вы нигде не использовали this.state.people в своем методе render.
  2. Вы смешиваете состояние компонента React и состояние Redux. Состояние Redux передается в React в качестве реквизита (обычно через функцию сопоставления, называемую mapStateToProps, вы можете называть ее как угодно). Эту функцию сопоставления необходимо передать для подключения (mapStateToProps) (PeopleView). Функция соединения react-redux является функцией карри.
  3. По соглашению вам действительно не нужно делать stateToProps статическим методом класса компонента. Обычно это верхний уровень (или область действия файла) для этой функции.

Дайте мне знать, если я могу уточнить свой ответ.

person light.wave    schedule 18.08.2018

arrow_upward
0
arrow_downward

Здесь в вашем конструкторе:

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