reactjs - Redux 状态已更新，但未调用 mapStateToProps

问题描述

当我更改输入文本值并单击“保存”按钮时，“类别名称”将被更改。

类别名称.js

class CategoryName extends Component {

        render() {
                return (
                    <>  
                       <section className="CategoryName">
                          <div>
                             <div>{this.props.categoryName}</div>
                          </div>
                       </section>
                    </>
                )
        }
 }
    
// react-redux 
const mapStateToProps = (state) => {
    console.log(state.categoryName);
    return {categoryName: state.categoryName}
};
    
export default connect(mapStateToProps)(CategoryName);

/CategoryName/index.js

import {re_modifyCategoryName} from './reducers/index.js'

const store = createStore(re_modifyCategoryName)

class CategoryList extends Component {
    render() {
        return(
            <>
               <div>
                   <Provider store ={store}>
                      <CategoryName />
                   </Provider>
                   <Provider store ={store}>
                      <CategoryName />
                   </Provider>
               </div>
           </>
        )
    }
}
export {CategoryList}

/reducers/index.js

import * as types from '../actions/ActionTypes';

var initialState = {
    categoryName: 'default name in redux'
};



function re_modifyCategoryName(state=initialState, action) {
    switch(action.type) {
        case types.MODIFY_CATEGORY_NAME :
            return {
                ...state,
                categoryName : action.categoryName,
            }
            
        default:
            return state;

    }
}

export {re_modifyCategoryName}

修改类别名称.js

class ModifyCategoryName extends Component {

    state = {
        categoryName : "default name",
    }

    

    _saveModifyCategoryName = () => {
        
        this.props.onModifyCategoryName(this.state.categoryName)
    }
    
    _onChange = (e) => {
        this.setState({
            categoryName : e.target.value
        })
    }
   
    render(){
        return (
            <>
                <div className="ModifyCategoryName">
                    <div className="ModifyCategoryNameWrapper">
                        <div>
                            <div>
                                Header
                            </div>
                            <div>
                                <input className="ModifyCategoryNameInput" type="text" onChange={this._onChange} />
                            </div>
                            <div>
                                <button onClick={this._saveModifyCategoryName}>save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

const mapDispatchToProps = (dispatch) => ({
    
    onModifyCategoryName: (categoryName) => {
        dispatch(actions.modifyCategoryName(categoryName))
    }
})

export default connect(null, mapDispatchToProps)(ModifyCategoryName)

/ModifyCategoryName/index.js

import {re_modifyCategoryName} from './reducers/index.js'

const store = createStore(re_modifyCategoryName)


ReactDOM.render(
<Provider store={store}>
    <ModifyCategoryName />
</Provider>, document.getElementById('modify-category-name-modal'))

/actions/index.js

import * as types from './ActionTypes';

export const modifyCategoryName = (categoryName) => ({
    type: types.MODIFY_CATEGORY_NAME,
    categoryName
});

因为我在 CategoryName.js 插入console.log(state.categoryName)，所以const mapStateToProps当页面第一次呈现时，它显示在控制台和CategoryName.js中。我认为这证明了与CategoryName.js的良好连接。'default name in redux'initialState.categoryNameredux store{this.props.categoryName}redux store

此外，当我将文本'change category name'作为输入的新文本值写入并单击“保存”按钮时，将触发ModifyCategoryName.js_saveModifyCategoryName中的dispatch(action)，并且 redux 存储的状态将更改为. 如果您从我的 redux-dev-tool 中看到此内容，您可以检查是否已更改为. 我认为这证明了这一点并且进展顺利。reducer'default category name''change category name'dispatch(action)redux update

但是，如上图所示，redux 的状态已更新，但未调用 mapStateToProps。当然，console.log(state.categoryName)在mapStateToProps第一次呈现页面时会调用 in，但即使state of redux更改了，任何更改都不会显示在console和{this.props.categoryName}at类别名称.js

我怎么了？

标签： reactjsreduxreact-reduxreactjs-flux

reactjs - Redux 状态已更新，但未调用 mapStateToProps

问题描述

解决方案

推荐阅读