Question

我正在开发诸如tinder之类的应用程序，以练习自己的本机反应能力。我无法从Firebase后端进行条件渲染。

下面是我的代码。

class CardsScreen extends Component {
constructor(props) {
super(props);
this.state = {
  users: [
    { name: "chris", gender: "male", interestedIn: "women" },
    { name: "jane", gender: "female", interestedIn: "men" },
    { name: "fred", gender: "male", interestedIn: "women" },
    { name: "vanessa", gender: "female", interestedIn: "men" }
  ],
  data: {}
};
this.usersRef = firebase
  .database()
  .ref("users/" + this.props.currentUser.uid);
this.likedRef = firebase
  .database()
  .ref("users/" + this.props.currentUser.uid + "/likes");
}

componentDidMount() {
this.listenUserInterest();
}

 listenUserInterest = () => {
this.usersRef.on("value", snapshot => {
  let gender = snapshot.val().gender;
  this.setState({ currentGender: gender });
  console.log(gender);
});
};

handleYup = card => {
const user = this.props.currentUser.uid;
if (user) {
  const newItem = {
    name: card.name,
    gender: card.gender,
    interestedIn: card.interestedIn
  };
  this.likedRef.push().update(newItem);
}
console.log(`Yup for ${card.name}`);
};

handleNope(card) {
console.log(`Nope for ${card.text}`);
}

renderNoMoreCards() {
return (
  <View>
    <Text style={styles.noMoreCardsText}>No more cards</Text>
  </View>
);
}

render() {
return (
  <SwipeCards
    cards={this.state.users}
    renderCard={cardData => <User {...cardData} />}
    renderNoMoreCards={this.renderNoMoreCards}
    handleYup={this.handleYup}
    handleNope={this.handleNope}
    hasMaybeAction
    source={{ uri: this.state.image }}
  />
  );
 }
}

function mapStateToProps(state) {
return {
currentUser: state.user.currentUser
};
}

直到现在，我根据兴趣进行了注册，一切顺利。我放置了一些静态数据来根据性别来渲染卡片。这是我卡住的部分。我只是不知道如何从firebase中获取基于性别的数据并进行条件渲染。如果我对女性感兴趣，我只想呈现女性卡片。应该采取什么方法？我尝试使用异步等待，但无法使其工作。

Answer 1

将数据分配给刷卡时，仅在其中过滤数据。

像这样

<SwipeCards
    cards={this.state.users.filter(item=>item.gender == this.state.currentGender)} //this.state.currentGender contains current gender which can be any variable not necessary to be state
    renderCard={cardData => <User {...cardData} />}
    renderNoMoreCards={this.renderNoMoreCards}
    handleYup={this.handleYup}
    handleNope={this.handleNope}
    hasMaybeAction
    source={{ uri: this.state.image }}
  />

在状态或变量中存储当前性别

Answer 2

对于条件渲染，可以在render方法中使用类似以下内容的东西： {this.state.gender =='F'？[// view]：[// view]} 但我想在您的情况下，您需要先按性别区分列表，然后再显示列表，这是比条件渲染更好的方法

Answer 3

但是我只能使用此功能从firebase获取数据。如果我把性别代替而不是对它感兴趣，它将给我性别。但是我怎么能把它放在一个状态或变量中呢？它仅在功能中可用？

listenUserInterest = card => {
this.usersRef.on("value", snapshot => {
let interestedIn = snapshot.val().interestedIn;
this.setState({ data: interestedIn });
console.log(interestedIn)// this gives interested in data
});
};

如何分配异步Firebase数据以响应初始状态

3 个答案: