Question

我有一个react / Redux应用程序。问题是我想在组件状态下渲染元素列表，并且当执行render方法并且我不能使用它时，该列表始终为空。

此元素来自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);

处于状态的人员在render方法中始终为空，但是props中的人员列表始终可以。为什么会这样？

如何设置可处理渲染的状态并开始从此列表中删除人员？

Answer 1

您的代码通常存在一些问题。

this.state.people仅在构造函数中根据this.props.people的值进行一次初始化，如果您未传入值，则默认值为undefined。请注意，您没有在this.state.people方法中的任何地方使用render。
您正在混淆React的组件状态和Redux的状态。 Redux的状态以props的形式传递给React（通常通过名为mapStateToProps的映射函数，您可以随意调用它）。需要将此映射函数传递给connect（mapStateToProps）（PeopleView）。 react-redux的connect函数是curry函数。
按照约定，您实际上不需要使stateToProps成为组件类的静态方法。通常，它是该功能的顶层（或文件范围）。

让我知道是否可以进一步阐明我的答案。

Answer 2

在您的构造函数中：

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

状态部分的渲染内部是空的

2 个答案: