Блог

в componentWillMount() из Table.js запускает действие в хранилище redux с именем ‘DUPLICATE_DATA’, которое должно скопировать данные контактов в хранилище redux и дублировать данные в newcontacts в хранилище redux. Затем он должен вернуть измененное состояние redux в Table.js компонент. Это не работает должным образом, потому что консоль показывает следующий результат: консоль, показывающая результат при запуске кода

• Консоль показывает, что действие запущено throguh Table.js компонент.
• Консоль показывает, что измененное состояние (дублирование контактов в newcontacts) работало внутри хранилища redux.
• Однако консоль показывает, что состояние фактически не изменяется при передаче на Table.js компонент как newcontacts является пустым массивом в консоли. и вот тут я в замешательстве. newcontact должен иметь точно такой же контент, что и contact, но это не так. Почему?? Помогите!!

Вот исходный код:https://github.com/dyl4810/dynamicDataTable

И вот развернутое приложение в действии: https://dyl4810.github.io/dynamicDataTable /

Table.js:

 import React from "react";
import "../../styles/App.css";
import { connect } from "react-redux";
import Search from './Search';
import UpDownArrow from './UpDownArrow';
import {sortByField, duplicateData} from '../../actions/postActions'

class Table extends React.Component {

  constructor(props){
    super(props);
    this.onArrowClick =this.onArrowClick.bind(this)
  }

  componentWillMount(){
    this.props.duplicateData(this.props.dataName)
    console.log('Redux state passed onto Table component after completion of duplicateData action:')
    console.log(this.props.duplicatedData)
  }

  createDataRows(){
    console.log('creating data rows')
    let renderedRows = [];
    let data = this.props.data;
    let fieldKeys = Object.keys(data[0]);

    for(let i=0; i <= data.length -1; i  ){
      let tds =[]
      for(let j=0; j <= fieldKeys.length -1; j  ){
        tds.push(<td className ='tableCell' key={j}>{data[i][fieldKeys[j]]}</td>)
      }
      renderedRows.push(<tr key = {i}>{tds}</tr>)
    }
    return renderedRows;
  }

  createDataHeader(){
    console.log('creating data header')
    let headers = Object.values(this.props.headerObj[0]);
    let headerKeys = Object.keys(this.props.headerObj[0]);
    let ths =[];
    for(let i =0; i<= headers.length-1; i  ){
      ths.push(
        <th className='tableCell' key = {i}>
          {headers[i]}
          <UpDownArrow
            onArrowClick = {this.onArrowClick}
            ref={(fieldArrow)=>this[headerKeys[i]   'Arrow'] = fieldArrow}
            id= {headerKeys[i]} 
          />
        </th>
      )
    }
    return ths;    
  }

  onArrowClick(headerKeyActive){
    Object.keys(this.props.headerObj[0]).forEach(headerKey =>{
      if(headerKey !== headerKeyActive){
        this[headerKey   'Arrow'].defaultDownArrow()
      }
    })
    this.props.sortByField(headerKeyActive, this.props.dataName)
  }  

  render() {
    return (
      <div>
        <Search headerNames = {this.props.headerNames}/>
        <table>
          <thead>
            <tr>
              {this.createDataHeader()}
            </tr>
          </thead>
          <tbody>
            {this.createDataRows()}
          </tbody>
        </table>
      </div>
    );
  }
}

const mapStateToProps = (state, props) => {
  return {
    headerObj: state[props.headerNames],
    data: state[props.dataName],
    duplicatedData: state['new'   props.dataName]
  };
};

const mapDispatchToProps = (dispatch) =>{
  return {
    sortByField: (headerKeyActive, dataName) => dispatch(sortByField(headerKeyActive, dataName)),
    duplicateData: (dataName) => dispatch(duplicateData(dataName))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Table)
  

хранилище redux:

 const initState = {
  treeData: [
    {
      id: 1,
      name: "Contacts",
      children: []
    }
  ],

  treeDepth: 0,

  contacts: [
    {
      id: 1,
      company: "Rapid Precision Mfg.",
      title: "Quality Engineer",
      firstName: "Dongyob",
      lastName: "Lee",
      officePh: "",
      ext: "",
      cell: "669-294-0910",
      email: "dyl4810@gmail.com"
    }
  ],
  contactsKeyNames: [
    {
      id: "ID",
      company: "Company",
      title: "Title",
      firstName: "First Name",
      lastName: "Last Name",
      officePh: "Office",
      ext: "Ext",
      cell: "Cell",
      email: "Email"
    }
  ],
  newcontacts: []
};
const rootReducer = (state = initState, action) => {
  switch(action.type){
    case 'SORT_BY_FIELD':
      break;

    case 'DUPLICATE_DATA':
      let newState = state;
      newState.newcontacts = newState.contacts;
      state = newState;
      console.log('modified redux state inside of redux action DUPLICATE_DATA:')
      console.log(state.newcontacts)
      return state;

    default:
      return state;
  }   
  return state;
};

export default rootReducer;