简体   繁体   English

我可以使用操作和减速器来更新状态,但是当我尝试对其引发的操作执行onClick时,可以在组件上更新状态

[英]I am able to update the state using action and reducer but on the component when I try to do onClick for the action it throws

    ` import React, { Component, PropTypes } from 'react';
       import { connect } from 'react-redux';
        import { itemsFetchData } from '../actions/sidenavaction';

       class SideNavItem extends Component {
            componentDidMount() {
           this.props.fetchData('http:
           //58f5d2ccc9deb71200ceecef.mockapi.io/nav');
            }

          render() {    
          var Nest=function(par) {
                const numbers = par.itemized;
                const listItems = numbers.map((number) => <li key=
           {number.sid}>{number.svalue}</li>);
                return (<ul>{listItems}</ul>);
            };



             if (this.props.hasErrored) {
               return <p>Sorry! There was an error loading the items</p>;
               }

           if (this.props.isLoading) {
        return <p>Loading…</p>;
              }

           return (
        <ul>{this.props.items.map((item) =>         
        <ul key={item.id} onClick={this.props.toggleDiv}><a href="#">
           {item.value}</a>
            {item.sub && <Nest itemized={item.sub} />}          
        </ul>               
        )}
        </ul>
            );          
          }
             }

        const mapStateToProps = (state) => {
      return {
     items: state.items,
     hasErrored: state.itemsHasErrored,
     isLoading: state.itemsIsLoading
           };
            };

         const mapDispatchToProps = (dispatch) => {
               return {
             fetchData: (url) => dispatch(itemsFetchData(url)),
                toggleDiv: () => dispatch(toggleDiv())
            };
       };

              export default connect(mapStateToProps, mapDispatchToProps)
        (SideNavItem);`

On the on Click function I am passing the toggleDiv action to props but on clicking the tag on my screen it throws error toggleDiv not defined.The state is also getting updated by the value which I want to pass using action and reducer (action) 在on Click函数上,我正在将toggleDiv动作传递给道具,但是单击我的屏幕上的标签时,它会抛出未定义的错误toggleDiv。状态也被我要使用动作和reducer(动作)传递的值更新
export function toggleDiv(){ return { type: 'TOGGLE_DIV' }; }

(reducer) `export function toggleDivReducer(state = { hidden: true}, action){ switch(action.type) { (reducer)`导出功能toggleDivReducer(state = {hidden:true},action){switch(action.type){

        case 'TOGGLE_DIV':
        return Object.assign({}, state, {hidden: !state.hidden});

            default:
            return state;

          }

           }`

您只导入itemsFetchData操作,而不是toggleDiv ,因此当mapDispatchToPropstoggleDiv不会是未定义的

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 登录到控制台而不是减速器操作中的代理 object 时,我如何看到 state? - How do I see state when logging to the console instead of Proxy object inside reducer action? 如何用动作更新减速器状态? - How to update a reducer state with action? 当我尝试显示组件 onClick 时,反应 State 保持不变 - React State remains immutable when i try to show component onClick 如何在没有组件内操作的情况下异步更新 state? - How can I update state asynchronously without action within component? 我无法使用调度操作(使用 Redux-starter-kit)更新 Redux 中的 state - I am unable to update my state in Redux with dispatched action (using Redux-starter-kit) 为什么当我尝试使用 redux 控制台 state 并反应 js 时,我的操作结果数据是 null - Why my action result data is null when I try console the state using redux and react js 如何在 redux reducer 中更新 state? - How do I update a state in redux reducer? React Typescript:当我尝试使用 withRouter 将历史参数从组件发送到操作时出现问题 - React Typescript: Problem when i try to send history argument from a component to an action using withRouter 当我执行 onSubmit 时,我无法显示 state - I am not able to display the state when I do onSubmit 我可以在减速器中调度一个动作吗? - Can I dispatch an action in reducer?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM