реагировать на нативные реквизиты при обновлении экрана - PullRequest
Новая
       10

реагировать на нативные реквизиты при обновлении экрана

0 голосов
/ 19 мая 2019

Я не добавляю редукторы и действия здесь, потому что это работает нормально, я получаю banner objects с сервера. Здесь проблема, когда я делаю console.log(this.props.banner_list) в рендере. кажется, что метод рендеринга вызывается два раза, и в первый раз this.props.banner_list не определен, и его ошибка выдается при попытке показать объекты внутри представления. И второй раз, когда он отображает this.props.banner_list правильно в console. Я не понял, что здесь происходит. кто-нибудь, пожалуйста, помогите мне 

class App extends Component<Props> {

    componentDidMount(){
       this.props.getBanners()
    }
  render() {
    console.log(this.props)// here iam logging the props

    return (
      <View style={styles.container}>
       // its throwing error so i comment it , i can see the render 
       // getting called two times. first time its undefined .
        {banner_list.banners.banners.map(obj=>{
          return(
            <Text>{obj.title}</Text>
          )
        })}  

      </View>
    );
  }


function mapStateToProps(state){
      return {
        banners_list:state.banners
      }   
    }

    function mapDispatchToProps(dispatch){
        return bindActionCreators({getBanners}, dispatch)
    }

Ответы [ 3 ]

2 голосов
/ 19 мая 2019

Re "кажется, что метод рендеринга вызывается два раза" : правильно, он вызывается дважды. Когда ваш компонент монтируется, вызывается render(). Это вызывает componentDidMount() для вызова. Когда вызывается componentDidMount(), он вызывает this.props.getBanners() как в вашем коде. Это вызывает повторную визуализацию, которая вызывает render() во второй раз.

Re "впервые this.props.banner_list не определен" Исправить. Как упоминалось выше, первый рендеринг происходит ДО вызова componentDidMount() и, следовательно, до вызова this.props.getBanners(). В данный момент существует this.props, поэтому ошибка не генерируется, но она еще не содержит поля banners, поэтому просто возвращает undefined.

Re "ошибка выброса, когда я пытаюсь показать объекты внутри представления" Это происходит потому, что если вы попытаетесь отобразить неопределенный объект внутри представления, он выдаст ошибку. Во время этого начального рендеринга this.props.banners не определено, следовательно, ошибка.

Решение состоит в том, чтобы ОБЯЗАТЕЛЬНО ОКАЗАТЬ представление. Если вы сделаете <View>{a && b}</View>, если a равно false, Javascript автоматически отобразит это как <View>null</View>, не потрудившись проверить, что такое b. Таким образом, перепишите ваш код следующим образом: 

class App extends Component<Props> {

    componentDidMount(){
       this.props.getBanners()
    }
  render() {
    console.log(this.props)// here iam logging the props

    return (
      <View style={styles.container}>
       // its throwing error so i comment it , i can see the render 
       // getting called two times. first time its undefined .
        {banner_list.banners && banner_list.banners.banners.map(obj=>{
          return(
            <Text>{obj.title}</Text>
          )
        })}  

      </View>
    );
  }


function mapStateToProps(state){
      return {
        banners_list:state.banners
      }   
    }

    function mapDispatchToProps(dispatch){
        return bindActionCreators({getBanners}, dispatch)
    }

Все, что я там добавил ^^, это banner_list.banners && до banner_list.banners.banners.map и т. Д.

1 голос
/ 19 мая 2019

Происходит следующее: когда компонент App визуализируется в первый раз, состояние вашего избыточного хранилища banners, вероятно, не определено. После того, как компонент монтируется, вызов this.props.getBanners в основном вызовет обновление в хранилище резервов, которое, в свою очередь, отправит новые реквизиты в компонент приложения.

Когда компонент получает новые реквизиты, он будет перерисовываться на основе реквизитов, полученных из хранилища с избыточностью.

Итак, при попытке доступа к banners_list.banners.banners.map будет возвращена ошибка при первом рендере, поскольку banners_list пусто. Чтобы смягчить это, вам нужно добавить проверку в ваш метод рендеринга следующим образом ... 

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

  return (
    <View style={styles.container}>
      { 
        banners_list &&
          banners_list.banners.banners.map(obj=> (<Text>{obj.title}</Text>))
      }  
    </View>
  );
}
1 голос
/ 19 мая 2019 
  render() {
    console.log(this.props)// here iam logging the props

    return (
      <View style={styles.container}>
       // its throwing error so i comment it , i can see the render 
       // getting called two times. first time its undefined .
        {banner_list.banner && banner_list.banners.banners.map(obj=>{
          return(
            <Text>{obj.title}</Text>
          )
        })}  

      </View>
    );
  }

Вы можете изменить эту строку кода. может быть, то, что происходит, происходит в начале вашего состояния. Сначала я представляю ваше состояние притока как-то так 

{
    banners:{}
}

и после 

{
    banners:{
        banners:{
            banners:[
            {title:'Hello world'}
            ]
        }
    }
}

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

...