는 sobject의 목록 컨트롤러

Question

내가 componentWillMount 방법

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

에서 원격 동작 (세일즈 포스 기능)를 호출하고

에서 목록을 가져 오는 한 후 표시하지 않습니다 JS 반응 내 작업은

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

에 이 줄 아니오 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

현재 state = action.accts; 여기 newState[action.listIndex].Name = action.acctName 감속기 내부 상태를 수정하고 있습니다.

아마 그 때문에 문제가 발생했을 수 있습니다.

그렇지 않은 경우 redux-devtools을 사용하여 새 개체가 실제로 상태로 저장되었는지 확인하십시오. 그런 다음 react devtools을 사용하여 올바른 데이터가 HomeView