ReactJs 渲染无法在数据更改时正确更新

Question

编辑：下面是以两种不同的方式创建的组件，但都没有工作。仍然需要帮助。

使用 createReactClass 的解决方案 1

//Here are imports of my component


var ListPeople = createReactClass({
  people: [],

  componentWillReceiveProps: function(nextProps) {
    this.people = [];
    if(nextProps.peopleSuccess.content.length > 0) {
      this.people = [];
      for(var i = 0; i < nextProps.peopleSuccess.content.length; i++) {
        this.people.push(<Person
      checkboxValue={nextProps.peopleSuccess.content[i].checkboxValue}
      email={nextProps.peopleSuccess.content[i].email}
      emailValidation={nextProps.emailValidation}
      handleEmailChange={nextProps.handleEmailChange}
      handleOnBlur={nextProps.handleOnBlur}
      handlePersonSelect={nextProps.handlePersonSelect}
      handlePhoneChange={nextProps.handlePhoneChange}
      handleUsernameChange={nextProps.handleUsernameChange}
      id={i}
      identity={nextProps.peopleSuccess.content[i].identity}
      key={i}
      name={nextProps.peopleSuccess.content[i].name}
      phone={nextProps.peopleSuccess.content[i].phone}
      phoneValidation={nextProps.phoneValidation}
      usernameValidation={nextProps.usernameValidation} />);
  }
 }
},

  render: function() {
  console.log('this.props.peopleSuccess: ', this.props.peopleSuccess);
    return (
      <tbody>
        {this.people}
      </tbody>
    );
  }
});


export default ListPeople;

将组件作为函数的解决方案 2

import React from 'react';
//import createReactClass from 'create-react-class'
import Person from '../components/Person';

function ListPeoplePeople(props) {
  const { peopleSuccess, emailValidation, handleEmailChange, handleOnBlur, 
          handlePersonSelect, handlePhoneChange, handleUsernameChange, 
          phoneValidation, usernameValidation } = props;
  let people = [];
  for(var i = 0; i < peopleSuccess.content.length; i++) {
    people.push(<Person
      checkboxValue={peopleSuccess.content[i].checkboxValue}
      email={peopleSuccess.content[i].email}
      emailValidation={emailValidation}
      handleEmailChange={handleEmailChange}
      handleOnBlur={handleOnBlur}
      handlePersonSelect={handlePersonSelect}
      handlePhoneChange={handlePhoneChange}
      handleUsernameChange={handleUsernameChange}
      id={i}
      identity={peopleSuccess.content[i].identity}
      key={i}
      name={peopleSuccess.content[i].name}
      phone={peopleSuccess.content[i].phone}
      phoneValidation={phoneValidation}
      usernameValidation={usernameValidation} />);
  }
  return (
      <tbody>
        {people}
      </tbody>
    );
}

export default ListPeoplePeople;

当我将 console.log() 放入渲染器时，它记录了正确的数据，现在数据来自连接到 Redux 存储的父组件，最初是从 REST API 获取的。

react/redux 包版本：

"react": "^15.5.4",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0"

Answer 1

在我看来，这似乎是对 react-redux 连接方法的不当使用。您应该在 container 组件上调用 connect，而不是像 People 组件那样的功能性无状态组件。所以正确的用法应该是这样的：

// Container
function Container(props) {
  // get 
  return <People 
    dataIUse={props.dataIUse}
    handleCheckBoxChange={switchChecboxes}
  />
}

const mapStateToProps = (state) => {
  return {
    dataIUse: state.dataIUseComingFromReduxStore
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
switchChecboxes: (data, index) => dispatch(changeChecboxValue(data, index))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Container);

// People
function People(props) {
  const { dataIUse } = props;
  let people = [];
  for(var i = 0; i < dataIUse.length; i++) {
    people.push(<Person
      checkboxValue={dataIUse[i].checkboxValue}
      email={dataIUse[i].email}
      id={i}
      identity={dataIUse[i].identity}
      key={i}
      name={dataIUse[i].name}
      onChange={props.handleCheckBoxChange}
      phone={dataIUse[i].phone}/>);
  }
  return (
    <tbody>
      {people}
    </tbody>
  ); 
}

我没有使用 React.createClass，而是使用了函数。它们应该可以工作，但请确保您在文件顶部导入 react。