我有一個 React on Rails 應用程式，但由于could not find react-redux context value; please ensure the component is wrapped in a <Provider>.
組件（為簡潔起見，省略了內部內容和匯入）：
const MyPage = ({ reduxData, payloads }) => {
const store = useReduxStore(reduxData);
const jads = new JsonApiDataStore();
const users = jads.sync(payloads.users);
//custom selector
const pathName = useSelector(selectPathName);
return (
<Provider store={store}>
<div>
{users.map((user) => (
<li key={user.id} />
))}
</div>
<div>{pathname}</div>
</Provider>
);
};
MyPage.propTypes = {
reduxData: PropTypes.shape(ReduxData).isRequired,
payloads: PropTypes.shape({
users: PropTypes.shape(Payload).isRequired,
}).isRequired,
};
export default MyPage;
視圖（此目錄/控制器的 index.html.erb）
<% content_for :title, "MyPage" %>
<% page = react_component_hash(
"MyPage",
props: {
reduxData: redux_data,
payloads: {
users: serialize(
@users,
UserSerializer,
),
}
},
prerender: true
) %>
<% content_for :page_styles, page["componentCss"] %>
<%= page["componentHtml"] %>
控制器路線：
def index
@users = User.all
render layout: "react"
end
在我的應用程式控制器中：
def redux_data
{
data: {
pathName: request.path
},
currentUser: serialize(current_user, CurrentUserSerializer, include: %w[company])
}
end
helper_method :redux_data
（這適用于具有類似設定的其他頁面）。
我錯過了什么？
uj5u.com熱心網友回復：
問題是我試圖在提供Provider/ 背景關系的同一組件中使用選擇器，基本上是在提供背景關系之前。相反，我只需要在子組件/具有<Provider />包裝器的主組件中使用選擇器，以便選擇器可以訪問背景關系。
就我而言：
子組件：
const ChildComponent = () => {
const pathName = useSelector(selectPathName);
return (
<div>{pathname}</div>
);
};
export default ChildComponent;
父組件：
const MyPage = ({ reduxData, payloads }) => {
const store = useReduxStore(reduxData);
const jads = new JsonApiDataStore();
const users = jads.sync(payloads.users);
return (
<Provider store={store}>
<div>
{users.map((user) => (
<li key={user.id} />
))}
</div>
<ChildComponent />
</Provider>
);
};
MyPage.propTypes = {
reduxData: PropTypes.shape(ReduxData).isRequired,
payloads: PropTypes.shape({
users: PropTypes.shape(Payload).isRequired,
}).isRequired,
};
export default MyPage;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/414597.html
標籤：