React reducer調用兩次

-1

我正在使用react和redux作爲我的應用程序。我的問題是我收到2次我的道具，第一次是未定義的，第二次是好的。所以我不能使用道具。React reducer調用兩次

import ... 
 

 
class Home extends Component { 
 
    
 
    //some code logic 
 
    
 
    render(){ 
 
console.log(this.props.header); 
 
    
 
const header = this.props.header; 
 
    
 
    return (
 
     <Welcome title={header.title} /> 
 
    ) 
 
    } 
 

 
} 
 

 

 
const mapStateToProps = (state) => { 
 
    return { 
 
    header: _.find(state.header, { 'page': 'accueil' }) 
 
    } 
 
} 
 

 
export default connect(mapStateToProps)(Home);

的console.log給我2回答： 1 /未定義 2/OBJ（即我所需要的）的陣列

遺漏的類型錯誤：無法讀取的未定義的屬性稱號

來源

2017-03-13 Nicks

定義需要多一點到這裏去。什麼時候設置了state.header？ API調用之後？這可能與將'if（！this.props.header）返回null'到'render'函數的開始一樣簡單，但這可能只會隱藏問題並且不能解決原因。 –

是的，我從API調用它。所以，如果我把它傳遞給孩子它不起作用，但如果我在這個組件內部正常循環，它工作得很好。 – Nicks

如果是這樣的話，在第一次渲染時（它還沒有獲得數據）它是'undefined'並不意外。返回'null'並不是在組件內部做一個「循環」，而是說有沒有渲染，在初始渲染的情況下沒有。您還可以返回某種「加載」組件而不是「空」，以獲得更好的用戶體驗。 –

Ť他的問題很簡單。在你的情況下，當你定義一個reducer時，初始狀態將被設置爲undefined，這將在第一次返回，稍後經過一些處理後將返回日期。在減速

var initialState = { 
    id: '', 
    page: '', 
    title: '', 
    metaTitle: '', 
    subtitle: '' 
} 
const reducerState = (state = initialState, action) => { 

    ...... //Do what you want here 
    return state 
}

第二盤初始狀態：所以，你可以做兩件事情

首先檢查header.title在組件

class Home extends Component { 

    //some code logic 

    render(){ 
console.log(this.props.header); 

const header = this.props.header; 

    return (
     {header.title && <Welcome title={header.title} />} 
    ) 
    } 

} 


const mapStateToProps = (state) => { 
    return { 
    header: state.header 
    } 
} 

export default connect(mapStateToProps)(Home);

來源

2017-03-13 11:37:26

嘗試你的解決方案得到的錯誤'initialState'未定義 – Nicks

更改'var intialState = {'到'var initialState = {' –

變量名initialstate中有一個錯字，對其進行了更正。 –

React reducer調用兩次

回答

相關問題