#javascript #reactjs #redux #react-redux
#javascript #reactjs #redux #реагировать-redux
Вопрос:
Я пытаюсь создать меню динамически на основе местоположения пользователя при react
использовании redux
.
makeMenu
Действие имеет следующее начальное состояние в своем редукторе: (Весь код редуктора находится в конце сообщения)
const initialState = {
current_url: url,
menu_urls: urls.filter(item => item !== url)
}
Он отлично работает после его использования и применения mapStateToProps
функции в компоненте:
const mapStateToProps = (state) => ({
state: state.makeMenu
})
Итак, в компоненте, с помощью которого я получил доступ к его значению this.props.state.makeMenu
, он также работает нормально, и я получаю следующий результат после console.log(urls)
:
{current_url: "", menu_urls: Array(4)}
current_url: ""
menu_urls: Array(4)
0: "edu"
1: "projects"
2: "skills"
3: "honors"
length: 4
__proto__: Array(0)
__proto__: Object
Проблема в том, что я хочу сопоставить menu_urls для создания подменю ( Menu.Item
в коде):
import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Breadcrumb, Menu } from 'antd';
import { HomeOutlined } from '@ant-design/icons'
import { makeMenu } from '../../redux/actions'
import './navigation-ls.css';
class NavigationLS extends Component {
render() {
const urls = this.props.state.makeMenu
const menu = (
<Menu>
{console.log(urls)}
{
urls.menu_urls.map((url) =>
<Menu.Item>
<Link to={"/" url}>
{url}
</Link>
</Menu.Item>
)
}
</Menu>
);
return (
<Fragment>
{console.log('hey')}
{console.log(this.props.state)}
<div className="nav">
<div className="pwd">
$PWD
</div>
<div className="breadcrumb">
<Breadcrumb>
<Breadcrumb.Item>
<HomeOutlined/>
</Breadcrumb.Item>
<Breadcrumb.Item overlay={menu}>
<Link to="/">
info
</Link>
</Breadcrumb.Item>
</Breadcrumb>
</div>
</div>
</Fragment>
)
}
}
const mapStateToProps = (state) => ({
state: state.makeMenu
})
export default connect(
mapStateToProps,
{ makeMenu }
)(NavigationLS)
Как я уже сказал console.log(urls)
, работает нормально, но urls.menu_urls
не работает. Я прочитал аналогичный вопрос в stackoverflow, но ни один из них не помогает.
Редактировать:
makeMenu reducer:
import { MAKE_MENU } from '../actionTypes'
const urls = [
"",
"edu",
"projects",
"skills",
"honors",
]
const url = window.location.href.split("/")[3]
const initialState = {
current_url: url,
menu_urls: urls.filter(item => item !== url)
}
const makeMenu = (state = initialState, action) => {
switch(action.type) {
case MAKE_MENU: {
const { content } = action.payload
return {
current_url: content,
menu_urls: urls.filter(item => item !== content)
}
}
default:
return state
}
}
export default makeMenu
Комментарии:
1. Это немного сбивает с толку. Вы передаете
state
какprop
viastate.makeMenu
. ГдеmakeMenu
создается вinitialState
объекте?2.
makeMenu
Это имя действия? фрагмент состояния redux? Оба (почему)?props.state
это вашеstate.makeMenu
сокращение, ноstate.makeMenu.makeMenu
в редукторе нет, что я могу сказать, простоcurrent_url
иmenu_urls
.3. @codemax Я новичок в концепциях redux. Я добавил код редуктора. Я был бы благодарен, если бы вы могли помочь мне лучше понять концепции и проблему.
4. @DrewReese да, это так. имя действия. Я не знаю, я только что следовал примеру учебника по react-redux . Я был бы благодарен, если бы вы могли помочь мне лучше понять концепцию.
Ответ №1:
Вы устанавливаете URL-адреса для this.props.state.makeMenu, пока оно не определено. Вы должны установить URL-адреса в this.props.state.