Как автоматически запустить функцию после загрузки страницы в реакции?

Question

В моем componentDidMount () я вызываю actionCreator в моем файле приставки, чтобы выполнить вызов API для получения списка элементов.Этот список элементов затем добавляется в хранилище избыточностей, к которому я могу получить доступ из моего компонента через mapStateToProps.

const mapStateToProps = state => {
    return {
        list: state.list
    };
};

Так что в моем render () у меня есть:

render() {
    const { list } = this.props;
}

Теперь, когда страница загружается, мне нужно запустить функцию, которая должна отображаться на этом list.

Допустим, у меня есть этот метод:

someFunction(list) {
    // A function that makes use of list
}

Но как мне его назвать?Я должен вызвать его, когда список уже доступен для меня, так как моя функция выдаст мне ошибку, список undefined (если он еще не доступен).

Я также не могу вызвать его при рендеринге (дооператор return), поскольку он выдает ошибку, что render () должен быть чистым.

Есть ли другой метод жизненного цикла, который я могу использовать?

Answer 1

Просто сделайте это, и в избыточном магазине, пожалуйста, убедитесь, что начальное состояние списка должно быть []

const mapStateToProps = state => {
    return {
        list: someFunction(state.list)
    };
};

Answer 2

Это два способа играть с полученными реквизитами от Redux

Сделай это в рендере

  render() {
       const { list } = this.props;
       const items = list && list.map((item, index) => {
             return <li key={item.id}>{item.value}</li>
       });
       return(
            <div>
                 {items}
           </div>
       );
    }

Или сделать это в методе componentWillReceiveProps, если вы не используете реакцию 16.3 или выше

 this.state = {
      items: []
}
 componentWillReceiveProps(nextProps){
       if(nextProps.list != this.props.list){
            const items = nextProps.list &&    nextProps.list.map((item, index) => {
                  return <li key={item.id}>{item.value}</li>
             });
             this.setState({items: items});
        }
    }

    render() {
        const {items} = this.state;
        return(
           <div>
               {items}
           </div>
        );
     }

Вы также можете сделать это в componentDidMount, если ваш вызов Api выполняется в componentWillMount или принимается реквизит от родителя.