CODEWITHSUNDEEP
javascriptreact-nativenative-base
faanbece
faanbece

Reputation: 53

Invisible changes when screen update

I'm new in react-native and have some probems. In the fahterScreen I add some items to array and pass to childs as prop, I need that the child (CanastaScreen) update every 1seg and show the new value. I have the next code:

export default class CanastaScreen extends React.Component {
  constructor(props) {
    super(props);
    setInterval( () => { this.render(); }, 1000);
  };
  render() {
    return (
      <Container>
        <Content>
          {this.props.screenProps.canasta.map( (item) => {
            console.log(item.nombre);
            return (
              <Text>{item.nombre}</Text>
            );
          })}
        </Content>
     </Container>
     );
  }
}

Console output show correctly: Item1 Item2 Item3 etc. But the screen is always in blank. Some can help my about it ? Thanks

Upvotes: 1

Views: 89

Answers (2)

faanbece
faanbece

Reputation: 53

After various changes, is found, the complete structure is: Parent(App.js) call children(Menu, Canasta). Menu allow add items to the shop-car and Canasta allow to sort and delete items. These are the important parts of the code:

App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.stateUpdater = this.stateUpdater.bind(this);
    this.state = { canasta:[] };
  }

render() {
      return (
        <View>
          <RootNavigation data={[this.state, this.stateUpdater]} />
        </View>
      );
    }
  }

Menu.js

  tryAddCanasta(index, plato){
      let canasta = this.props.screenProps[0].canasta;
      plato.id_Plato = canasta.length;
      canasta.push(plato);
      this.props.screenProps[1]('canasta', canasta);
  }

Canasta.js

shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

render() {
    return (
      <Container>
        <Content>
          <List>
            {this.props.screenProps[0].canasta.map( (item) => {
               return ( this._renderRow(item) );
             })}
          </List>
       </Content>
     </Container>
     );
  }

Special thanks to @Shadow_m2, now I don't need check every time, it works in "real time"

Upvotes: 0

Shadow_m2
Shadow_m2

Reputation: 397

First of all, you never should call render method of a component. in React Native, a component should update only if it's state changes. so if you have something like this : 

<Parent>
   <Canasta> ... </Canasta>
</Parent>

assuming that the changing variable is called foo in state of Parent, you need to pass it as prop to Canasta (child) and now by changing state of Parent (changing foo), Canasta should get updated. here's an example (calling updateFoo will update both Parent and Canasta):

class Parent extends Component {
   constructor(props){
      super(props); // it's recommended to include this in all constructors
      this.state = { foo: initalValue } // give some value to foo
   }
   updateFoo(newValue){
     this.setState({foo: newValue}) // setting state on a component will update it (as i said)
   }
   render() {
     return(
       <Canasta someProp={this.state.foo}> ... </Canasta>
     )
   }
}
}

Upvotes: 1

Related Questions