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组件似乎一样。所以正确的用法如下：

＆＃13;

// 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>
  ); 
}

＆＃13;

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

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

1 个答案: