Question

我已经看过其他看似有类似问题的问题，但没有一个已接受的答案解决了我的问题。当使用新ID更新redux时，我正在尝试获取新名称并将它们加载到子组件中。

当我只使用redux而不使用state时（根据我的意愿），新ID不会传递给子组件，并且名称根本不加载

或者，我尝试使用state作为子组件中的名称（如下面的注释文本中所示）。但是......奇怪的是，每次更改ID时，组件都会根据以前的ID而不是当前ID加载名称。

终极版

const initialState = {
  objectOfIds: {"someID":"someID", "aDifferentID":"aDifferentID"},  // I know this format may seem redundant and odd, but I have to keep it this way
  arrayOfNames: ["John Doe", "Jenny Smith"]
}

Parent Compoenent

// React
import React from 'react';
import firebase from 'firebase';

//  Components
import ListOfNames from './ListOfNames';

//  Redux
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {set} from './../actions/index.js';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.changeIDs = this.changeIDs.bind(this);
  }

  changeIDs() {
    this.props.set("objectOfIds",{"aNewID":"aNewID","someOtherID":"someOtherID","anotherID":"anotherID"});
  }

  render (
    return (
      <div>
        <h2>Parent Component</h2>
        <button onClick={this.changeIDs}>Change Data</button>
        <ListOfNames objectOfIds={this.props.reduxData.objectOfIds}/>
      </div>
    )

  )
}

function mapStateToProps(state) {
    return {
        reduxData: state.reduxData
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
      set: set
    }, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(ParentComponent);

儿童竞争

// React
import React from 'react';
import firebase from 'firebase';

//  Redux
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {set} from './../actions/index.js';

// Firebase Database
var databaseRef;

class ListOfNames extends React.Component {
  constructor(props) {
    super(props);
    this.state= {
      arrayOfNames: []
    }
    this.fetchNamesForIds = this.fetchNamesForIds.bind(this);
    this.add = this.add.bind(this);
  }

  componentDidMount() {
    console.log("componentDidMount triggering...");
    firebase.auth().onAuthStateChanged(function (user) {
      if (!user) {
        console.log("no user authenticated");
      }
      databaseRef = firebase.database().ref('/people/' + user.uid);
      this.fetchNamesForIds(this.props.reduxData.objectOfIds);
    })
  }

  // I have tried making the fetch in componentWillReceiveProps so that the function would run anytime the IDs were updated in redux, but "this.props.objectOfIds" and "this.props.reduxData.objectOfIds"
  componentWillReceiveProps() {
    console.log("componentWillReceiveProps triggering...");
    console.log("this.props.objectOfIds");
    console.log(this.props.objectOfIds);
    console.log("this.props.reduxData.objectOfIds");
    console.log(this.props.reduxData.objectOfIds);
    this.fetchNamesForIds(this.props.reduxData.objectOfIds);
    // Note: I have also tried: this.fetchNamesForIds(this.props.objectOfIds); so that the data is passed in from the parent
  }

  // fetched the names for the associated IDs
  fetchNamesForIds(personIds) {
    if (personIds === [] || personIds === undefined || personIds === null) {

上一行的替代

我更愿意将数据存储在redux中，以便其他组件可以访问它，但这样做确实允许加载数据，但是它会加载延迟（即当我更改ID时，它会加载相关的名称以前的ID）

      // this.setState({
      //   arrayOfNames: []
      // });
      this.props.set("arrayOfNames", []);
      return
    }
    var arrayOfNames = [];
    // loop through person and set each value into the arrayOfNames array
    Object.keys(IDs).map(function(person, index) {
      console.log("person = " + person);
      console.log("index = " + index);
      // get names associated with the ids obtained
      var name = ''
      databaseRef.child('people').child(person).limitToFirst(1).on("value", function(snapshot) {
        var firstName = snapshot.child('firstName').val()
        var lastName = snapshot.child('firstName').val()
        name = firstName + " " + lastName
        console.log("name = " + name);
        arrayOfNames.push(name);
        console.log("arrayOfNames = " + arrayOfNames);
        this.props.set("arrayOfNames", arrayOfNames);

上一行的替代

我更愿意将数据存储在redux中，以便其他组件可以访问它，但这样做确实允许加载数据，但是它会加载延迟（即当我更改ID时，它会加载相关的名称以前的ID）

        // this.setState({
        //   arrayOfNames: arrayOfNames
        // });
      }.bind(this));
    }.bind(this));
  }

  render() {
    return(
      (this.props.user.arrayOfNames === [] || this.props.user.arrayOfNames === undefined || this.props.user.arrayOfNames === null || this.props.user.arrayOfNames.length < 1)
        ? <span>no people selected</span>
        : <div>
            <h5>List of People</h5>
            {this.props.user.arrayOfNames.map((name, index) => {
              return (
                  <h5>{name}</h5>
              )
            })}
          </div>
    )
  }
}

ListOfNames.propsTypes = {
  objectOfIds: React.PropTypes.Object
};


function mapStateToProps(state) {
    return {
        reduxData: state.reduxData
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({
      set: set
    }, dispatch)
}

export default connect(mapStateToProps, matchDispatchToProps)(ListOfNames);

类似问题：

是否有人了解如何根据redux中的当前ID获取我的组件加载数据？

Answer 1

可能是因为对象键已更改但未更改对象引用。一个hacky解决方案是在更改后调用this.forceUpdate()来更新组件：）

Answer 2

提示：如果使用新的javascript语法，则无需绑定函数。

this.add = this.add.bind(this);将通过编写添加方法来解决，如：

add = () => {
};

Answer 3

我有一个类似的问题，我在一个页面上多次加载子组件，尽管传递了我认为是唯一的ID，但它只会引用第一个ID。我知道这不是你所拥有的情况，但这将允许你有一个唯一的对象键和一个唯一的对象引用，希望能够解决你的问题。

这是我用于此的包：https://www.npmjs.com/package/react-html-id。导入包时，您需要使用大括号。

import { enableUniqueIds } from 'react-html-id'

其余的在npm上解释。

Answer 4

问题是子组件componentWillReceiveProps。您没有使用传播到此组件的新道具。使用nextProps调用componentWillReceiveProps，其中包含更新的道具。

在您的子组件中使用它

componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps triggering...");
    console.log("nextProps.objectOfIds ", nextProps.objectOfIds);
    console.log("nextProps.reduxData.objectOfIds ", nextProps.reduxData.objectOfIds);
    this.fetchNamesForIds(nextProps.reduxData.objectOfIds);
}

当父组件更新Redux时，子组件无法获取新数据

4 个答案: