屏幕更新时的无形变化

Question

我是 react-native 的新人，有一些问题。在 fahterScreen 中，我将一些项目添加到数组并作为道具传递给 childs，我需要 child (CanastaScreen) 每 1seg 更新一次并显示新值。我有下一个代码：

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

控制台输出正确显示：项目1 项目2 项目3 等等但屏幕始终是空白的。有的可以帮我一下吗？谢谢

Answer 1

首先，你永远不应该调用组件的渲染方法。在 React Native 中，组件只有在状态发生变化时才应该更新。所以如果你有这样的事情：

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

假设变化的变量在 Parent 的状态下被称为 foo，你需要将它作为 prop 传递给 Canasta (child) 现在通过改变Parent 的状态（更改 foo），Canasta 应该得到更新。这是一个示例（调用 updateFoo 将同时更新 Parent 和 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>
     )
   }
}
}

Answer 2

经过各种改动，发现完整的结构是：Parent(App.js) call children(Menu, Canasta)。菜单允许将项目添加到商店车，Canasta 允许排序和删除项目。这些是代码的重要部分：

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

特别感谢@Shadow_m2，现在我不需要每次都检查了，它在"real time"

中有效

屏幕更新时的无形变化

Invisible changes when screen update

javascript

react-native

native-base