Question

我正在使用React-Native和Redux，如果登录用户符合条件，我想在其中呈现按钮。按钮不显示！

renderIfEligible(toRender) {
  const building = this.props.building;
  const timings = this.props.timings;

  if (building && timings) {
    store.get(storage.userKey).then(user => {
      if (user != null) {
        if (building.submitter.includes(this.props.userId)) {
          console.log('RENDER');  // THIS IS PRINTED OUT IN THE BROWSER
          return toRender;
        }
      } else {
        console.log('NO RENDER');
        return false;
      }
    });
  }
}

// Function call
{this.renderIfEligible(
   <Button style={{marginTop: 20}} small danger transparent onPress={() => alert("delete")}><Icon name="trash" /></Button>)}

虽然console.log（）正在运行，但是为什么按钮没有出现？

更新1

我添加了

constructor(props) {
  super(props);
  this.state = { showButton: false};
}
  ....
renderIfEligible(toRender){
  self = this;
  if (building.submitter.includes(this.props.userId)) {
    self.setState({ showButton: true});
  } else {
    self.setState({ showButton: false});
  }

Answer 1

为了使此按钮能够根据react-native-simple-store正确呈现，您需要初始化您希望从组件中的store.get(storage.userKey)获得的值，以进行初始渲染，然后在{{1调用componentDidMount方法获取store.get()并将其设置为您默认的相同值。这是一个小例子。

userKey

基本上你只需要给组件一个默认状态，直到你有正确的数据。对于此示例，默认状态是组件不返回任何内容。我相信，作为一般规则，React呈现需要是同步的，因此如果您需要异步获取数据以便正确呈现，则只需在异步查询的值结算时再次通过呈现生命周期发送组件。

Answer 2

Button未显示，因为store.get(storage.userKey)是user对象的returning a promise，然后使用该对象映射到组件（或false） then函数。

由于您未返回then函数的结果，renderIfEligible的结果始终为undefined（您的returns用于lambda函数）。

不幸的是，只是将功能更改为return store.get(storage.userKey).then(user => {...})无法帮助您，因为它将返回promise组件（或false），但仍然无法呈现。

请查看this answer，了解如何解决这个问题。

条件呈现与AsyncStore失败的原生反应

更新1

2 个答案: