javascript - Redux 道具记录不正确的数据

Question

现在我正在尝试 console.log this.streamCreatorUid，但我遇到了一个特殊的问题。在我的 redux 调试器中，我可以清楚地在正确的位置看到我的数据。

这是我的流创建者的 redux 数据，直接来自我的调试器。

streams -
[0] - 
{category(pin): "Oldschool Runescape"
displayName(pin): "admin"
streamId(pin): "98ebc719-c7d5-4558-b99d-2d9f8306ec64"
title(pin): "accounttest"
uid(pin): "wsFc7pIMq5dMtw9hPU86DzUTdLO2"
}

我正在尝试从我的 mapstatetoprops 控制台记录 this.streamCreatorUid，但它正在返回当前Uid用户u9TcrICehNMlAmqyDHQY77L9CXq1。我很困惑为什么会这样，考虑到这不是我的调试器中显示的数据。

这是针对个人项目的。过去我可以毫无问题地访问redux这样的道具，现在我不太确定为什么会发生这种情况。

import React from 'react';
import { database } from '../../../firebaseconfig.js';
import { connect } from 'react-redux';


class StreamFollow extends React.Component {
  constructor(props) {
    super(props);
    this.uid = this.props.uid;
    this.displayName = this.props.displayName;
    this.streamCreatorUid = this.props.streamCreatorUid;
    this.streamCreatorDisplayName = this.props.streamCreatorDisplayName;
  }

  componentShouldUpdate(prevProps) {
    if (this.props.uid !== prevProps.uid) {
      this.uid = this.props.uid
    }

    if (this.props.streamCreatorUid !== prevProps.streamCreatorUid) {
      this.streamCreatorUid = this.props.streamCreatorUid;
    }
  }

  //creates a follower object under the stream creators uid
  createFollower = (e) => {
    const followerRef = database.ref(`User_Follow_Info/${e}/Follower`)

    const followerInfoObject = {
      uid: this.uid,
      displayName: this.displayName
    }

    followerRef.push(followerInfoObject);

  }

  //creates a following object under the users uid 

  //Add in checks to see if following object already exists. We can't follow someone multiple times

  createFollowing = (user) => {
    const followingRef = database.ref(`User_Follow_Info/${user}/Following`);

    const followingInfoObject = {
      uid: this.streamCreatorUid,
      displayName: this.streamCreatorDisplayName
    }


    console.log(this.streamCreatorDisplayName)
    //Check to see if follow already exists. 
    /*followingRef.once('value', function (snapshot) {
      if (snapshot.hasChild(DATA HERE)) {
        alert('exists');
      }
    }); */
    var isSignedIn = this.isSignedIn;

    followingRef.orderByChild('uid').equalTo(this.uid).once('value').then(snapshot => {


      console.log(snapshot.val());
      console.log(this.streamCreatorUid);
      if (isSignedIn) {
        console.log(snapshot.val())
        return
      } else {
        followingRef.push(followingInfoObject);
      }
    })

  }


  onSubmit = () => {
    if (this.props.isSignedIn === true) {
      this.createFollowing(this.uid);
      this.createFollower(this.streamCreatorUid);
    } else {
      //add in a sign in modal if user is not logged in
      console.log('please sign in')
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.onSubmit}>Follow</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    isSignedIn: state.auth.isSignedIn,
    displayName: state.auth && state.auth.userInfo ? state.auth.userInfo.displayName : null,
    uid: state.auth && state.auth.userInfo ? state.auth.userInfo.uid : null,
    streamCreatorUid: state.streams && state.streams[0] ? state.streams[0].uid : null,
    streamCreatorDisplayName: state.streams && state.streams[0] ? state.streams[0].displayName : null,
  }
}

export default connect(mapStateToProps)(StreamFollow);

标签： javascriptreduxreact-redux