react native with AsyncStore中的条件呈现失败

Question

我使用React-Native与Redux，我想呈现一个按钮，如果登录用户是合格的。不知何故，按钮不显示！

用于存储数据，我使用的是react-nate-simu-store

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（）工作时按钮不显示吗？

我补充说

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

按钮未显示，因为store.get（storage.userKey）正在返回用户对象的promise，然后使用then函数将其映射到组件（或false）。

由于您没有返回then函数的结果，因此renderifficible的结果始终是未定义的（您的返回的用于lambda函数）。

不幸的是，只需将函数更改为return store.get（storage.userKey）=

看看这个答案，看看如何解决这个问题。

Answer 2

为了使此按钮基于react native simple store正确渲染，您需要初始化组件中用于初始渲染的store.get（storage.userKey）中的值，然后在componentDidMount中调用store.get（）方法获取用户密钥，并将其设置为默认值。这里有一个小例子。

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isEligible: false,
    };
  }

  componentDidMount() {
    store.get(storage.userKey).then(user => {
      if (user !== null) { // add to this if statement any other checks you need
        this.setState({ isEligible: true });
      }
    });
  }

  render() {
    const { building, timings } = this.props;
    const { isEligible } = this.state;

    if (building && timings && isEligible) {
      return (
        <Button ... />
      );
    }
    return null;
  }

}

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