react在获得新的商店状态到道具后不会重新呈现

Question

import React, { Component } from 'react';
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { checked, notchecked } from '../../../actions';
import { connect } from "react-redux";
import local from './address';
import './index.css';
const mapStateToProps = state => {
    return {
      localsel : state.selectedLocal.locals
    }
  }
let mapDispatchToProps = (dispatch) => {
    return {
        check: (btn) => dispatch(checked(btn)),
        uncheck: (btn) => dispatch(notchecked(btn))
    }
}
class Seoul extends Component {
    constructor(props){
        super(props)
    }
    render(){
        var btnclicked = (e) => {
            let btnname = e.target.parentNode.getAttribute('id');
            if (e.target.checked) {
                console.log('checked');
                this.props.check(btnname);
            };
            if (!e.target.checked) {
                console.log('not checked');
                this.props.uncheck(btnname);
            };
            // HERE IS WHERE I CAN CHECK THE PASSED STORE STATE
            console.log(this.props.localsel);
            // -------------------------------------------------
        }
        return (
            <div className='localdiv localdiv1'>
                // HERE IS WHERE I WANT TO SEE MY STORE STATE
                {this.props.localsel.map(val=>{
                    return <h1>{val}</h1>
                })}
                // --------------------------------------------
                <ToggleButtonGroup className='togglebtngrp' type="checkbox">
                    <ToggleButton className='togglebtn0' onChange={btnclicked} variant="outline-secondary" value={0} id="entireseoul">Entire Seoul</ToggleButton>
                    {local.Seoul.map((value, index) => {
                        return (<ToggleButton key={index} className='togglebtn' onChange={btnclicked} variant="outline-primary" value={index + 1} id={value}>{value}</ToggleButton>)
                    })}
                </ToggleButtonGroup>
            </div>
        );
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Seoul);

import React, { Component } from 'react';
import { Jumbotron } from 'react-bootstrap';
import { Gyeongi, Incheon, Busan, Daegue, Daejeon, Sejong, Gwangju, Ulsan, Gangwon, Gyungnam, Gyungbuk, Jeonnam, Jeonbuk, Choongnam, Choongbuk, Jeju, Othercountry } from './Locals';
import Seoul from './Locals';
import './Detailsrch.css';

class Detailsrch extends Component{
    render(){
        var localselect = (e) => {
            let selector = document.getElementsByClassName('locals');
            let selector_local = document.getElementsByClassName('localdiv');
            let i = 0;
            for (let j = 0; j < selector_local.length; j++) {
                selector_local[j].style.display = 'none';
            }
            let boxclass = e.target.getAttribute('name');
            if (boxclass) document.getElementsByClassName(boxclass)[0].style.display = 'block';
            while (selector[i]) {
                selector[i].className = 'locals';
                i++;
            }
            if (e.target.className == 'localtext') {
                e.target.parentElement.className = 'locals localclick';
            } else {
                e.target.className = 'locals localclick';
            }
        }
        return (
            <Jumbotron className='searchjumbo'>
                <p>Locals</p>
                <Seoul />
                <Gyeongi />
                <Incheon />
                <Busan />
                <Daegue />
                <Daejeon />
                <Sejong />
                <Gwangju />
                <Ulsan />
                <Gangwon />
                <Gyungnam />
                <Gyungbuk />
                <Jeonnam />
                <Jeonbuk />
                <Choongnam />
                <Choongbuk />
                <Jeju />
                <Othercountry />
                <hr className='firsthr' />
                <p>type</p><hr />

                <p>career</p><hr />

                <p>country</p><hr />

                <p>sex</p>
            </Jumbotron>
        );
    }
};

export default Detailsrch;

import { combineReducers } from 'redux';
const initialstate = {
    locals: []
}
const localSelector = (state = initialstate, action) => {
    switch(action.type){
        case 'CHECKED':
            if(action.payload){
                var arr = state.locals;
                arr.push(action.payload);
                return {
                    ...state,
                    locals: arr
                };
            } else {
                return state;
            }
        case 'NOTCHECKED':
            if(action.payload){
                var arrnum = state.locals.indexOf(action.payload);
                var arr = state.locals;
                arr.splice(arrnum, 1);
                return {
                    ...state,
                    locals: arr
                };
            } else {
                return state;
            }
        default:
            return state;
    }
};

const rootReducer = combineReducers({
    selectedLocal: localSelector
});
export default rootReducer;

Answer 1

您正在如下所示更改redux状态

var arr = state.locals;
arr.push(action.payload);

redux状态应该是不可变的。您可以在这里查看一些关于如何在reducer中更新redux商店的提示。

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns