Question

我从componentWillMount方法

调用远程操作（salesforce功能）

componentWillMount()
  {
    this.props.dispatch(qryAccts());
    console.log(this.props);
  }

我的行动是

export function qryAccts()
{
  return dispatch => {
    ResponsiveCtrl.getAccts(function(r, e) {
      console.log('------26----',r);
      dispatch(recAccts(r))
    },{escape:false});
  }
}

Backbone.Events 在这一行没有26我得到的对象列表，但在我的dom它没有显示在此页面的负载

render() {
    return (
      <div>
        <h1>Accounts</h1>
        <ul>
         {this.props.accts && this.props.accts.map((v,i) => <li key={i}><input style={{width:'500px'}} onChange={event => this.handleChange(event,i)} value={v.Name}/></li>) }
        </ul>
      </div>
    );
  }

有什么猜测这里有什么问题。

完整代码

// ------------------------------------
// Constants
// ------------------------------------


export const RECEIVED_ACCTS = 'RECEIVED_ACCTS';
export const UPSERT_ACCTS = 'UPSERT_ACCTS';
export const ADD_ACCT = 'ADD_ACCT';
export const UPDATE_ACCTS = 'UPDATE_ACCTS';


// ------------------------------------
// Actions
// ------------------------------------
export function recAccts(accts) {
  return{
    type: RECEIVED_ACCTS,
    accts: accts
  }
}

export function qryAccts()
{
  return dispatch => {
    ResponsiveCtrl.getAccts(function(r, e) {
      console.log('------26----',r);
      dispatch(recAccts(r))
    },{escape:false});
  }
}

export function upsertAccts(acctStore) {
  return dispatch => {
    ResponsiveCtrl.upsertAccts(acctStore, function(r, e) {
      dispatch(recAccts(r))
    },{escape:false});
  }
}

export function addAcct() {
  return {
    type: ADD_ACCT
  }
}

export function updateAccts(name,index) {
  return {
    type: UPDATE_ACCTS,
    acctName:name,
    listIndex:index
  }
}

/*  This is a thunk, meaning it is a function that immediately
    returns a function for lazy evaluation. It is incredibly useful for
    creating async actions, especially when combined with redux-thunk!

    NOTE: This is solely for demonstration purposes. In a real application,
    you'd probably want to dispatch an action of COUNTER_DOUBLE and let the
    reducer take care of this logic.  */



// ------------------------------------
// Action Handlers
// ------------------------------------

// ------------------------------------
// Reducer
// ------------------------------------
const initialState = ;

//Reducer function
export function accts(state = initialState, action) {
  console.log('==action===',action);
  console.log('==initialState===',initialState);
  console.log('==state===',state);
  switch (action.type) {
  case RECEIVED_ACCTS:
  //Return the Accouts we receive from Salesforce
    state = action.accts;
    return state;
  case UPDATE_ACCTS:
  //Update our array at the specific index
    var newState = state.slice();
    newState[action.listIndex].Name = action.acctName;
    return newState;
  case ADD_ACCT:
  //Add a new Account to our Array
    var newState = state.slice();
    newState.push({Name:""});
    return newState;
  default:
    return state
  }
}

我的HomeView.js

export default HomeView

//Import React
import React from 'react'

//Import Redux Components
import { connect } from 'react-redux';

//Import Action
import { addAcct, upsertAccts, qryAccts, updateAccts } from '../../Counter/modules/counter';

class HomeView extends React.Component {
  constructor (props)
  {
    super(props);


  }
  componentWillMount()
  {
    this.props.dispatch(qryAccts());
    console.log(this.props);
  }

  //Perform Upsert Actions
  upsertAccts(e)
  {
    this.props.dispatch(upsertAccts(this.props.accts))
  }

  //Add new Account to the Array
  addAcct(event)
  {
    this.props.dispatch(addAcct());
    console.log('===this.props===',this.props);
  }


  //onChange function to handle when a name is changed
  handleChange(ev,index)
  {
    this.props.dispatch(updateAccts(ev.target.value,index));
  }

  dateChange(e)
  {
    console.log(e.target.value);
  }

  render() {
    return (
      <div>
        <h1>Accounts</h1>
        <ul>
         {this.props.accts && this.props.accts.map((v,i) => <li key={i}><input style={{width:'500px'}} onChange={event => this.handleChange(event,i)} value={v.Name}/></li>) }
        </ul>
      </div>
    );
  }
}

//Connects Redux State to React, Injects reducer as a property
//export default Page1Demo;
export default connect(state => ({ accts: state.accts }))(HomeView);

Answer 1

您正在此处{reduction]中修改状态state = action.accts;和newState[action.listIndex].Name = action.acctName。

可能是你的问题。

如果没有，请使用redux-devtools检查新对象是否实际保存在状态中。然后使用react devtools检查是否将正确的数据传递给HomeView

从控制器获取列表后，没有显示反应js的sobject列表

1 个答案: