javascript - 屏幕更新时看不见的变化

Question

我是 react 原生新手，有一些问题。在 fahterScreen 中，我向数组添加了一些项目并作为 prop 传递给 childs，我需要子级 (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项目3ETC。但屏幕始终一片空白。有人可以帮我一下吗？谢谢

Answer 1

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

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

假设更改的变量在 Parent 状态下名为 foo，您需要将其作为 prop 传递给 Canasta(子级)，现在通过更改 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>
     )
   }
}
}