React Redux：如何將特定對象prop從存儲區傳遞給子組件？

我在商店中有一個對象數組，並且有一個頁面列出了商店中的所有商品。我希望有一個組件僅列出來自其中一個單獨項目的信息。但我不明白如何將商店中的對象從商店傳遞到組件。React Redux：如何將特定對象prop從存儲區傳遞給子組件？

Router.js：

<Route path="/" component={MainLayout}> 
    <IndexRoute component={EventListContainer} /> 
    <Route path=":eventID" component={EventProfileContainer} /> 
</Route>

所以，根頁是罰款，並列出了所有在店裏事件項目。我想使用:eventID路線列出各個事件項目。

EventProfileContainer.js：

import _ from 'lodash'; 

const EventProfileContainer = React.createClass({ 
    render: function() { 
    return (
     <EventProfile {...this.props.event} /> 
    ); 
    } 
}); 

const mapStateToProps = function(store, ownProps) { 
    return { 
    event: _.find(store, 'id', ownProps.params.eventID) 
    }; 
}; 

export default connect(mapStateToProps)(EventProfileContainer);

我認爲這裏的重要組成部分，是mapStateToProps功能。我想我應該從這個零件中選擇商店中的單個對象：event: _.find(store, 'id', ownProps.params.eventID)（使用lodash _.find（））。但也許我錯過了什麼？

EventProfile.js：

export default function(props) { 
    return (
    <div className="event-profile"> 
     <img src={props.image} /> 
     <div className="details"> 
     <h1>{props.name}</h1> 
     <p>{props.description}</p> 
     </div> 
    </div> 
); 
}

東西被傳遞給EventProfile.js但頁面快到了空白。名稱，編號，圖片和說明爲空白。在商店的對象是這樣的：

name: 'name of the event', 
id: '2342343' 
description: 'description of the event' 
image: 'http://whatever.com/whatever.jpg'

我不知道我在做什麼錯。任何幫助表示讚賞！

來源

2017-01-09 JohnWLIV

看看the signature of _.find - 它需要一個謂詞，而不是一個屬性名稱和一個值。嘗試是這樣的：

event: _.find(store, (e) => e.id == ownProps.eventID)

（順便說一句，叫你mapStateToProps功能store的第一個參數是有點混亂，因爲它不是傳遞給函數的商店，但該狀態，即，store.getState()）

這裏是一個最小的運行例如：

var store = Redux.createStore(
 
    (state) => state, { 
 
    events: [ 
 
     {name: "event name here", id: "12345", description: "wat"}, 
 
     {name: "another event", id: "42", description: "nope"}, 
 
    ], 
 
    } 
 
); 
 

 
function EventProfile(props) { 
 
    return (
 
    <p>{props.event.name} ({props.event.id})</p> 
 
); 
 
} 
 
EventProfile = ReactRedux.connect((state, ownProps) => { 
 
    return { 
 
    event: _.find(state.events, (e) => e.id == ownProps.eventID), 
 
    } 
 
})(EventProfile); 
 

 
ReactDOM.render(
 
    <EventProfile eventID="42" store={store}/>, 
 
    document.getElementById("root") 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script> 
 
<div id="root"></div>

來源

2017-01-09 07:11:08 sk1p

React Redux：如何將特定對象prop從存儲區傳遞給子組件？

回答

相關問題