React redux组件在状态更改后不会重新渲染

Question

我的一个react redux组件在状态更改后不会重新渲染。我希望在选中复选框后启用选择。但这并没有发生。只有当我在页面上的其他地方单击另一个触发重新渲染的组件时，一切都会如我所料。我做错了什么？如果有任何帮助，我将不胜感激。

class Select extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<input type="checkbox" onClick={this.props.toggleSelect}/>
<select disabled={ !Object.keys(this.props.syncObjects).includes("select") }>
// some options 
</select>
</div>
)
}
}
const mapDispatchToProps = {
toggleSelect
}
const mapStateToProps = state => {
return {
syncObjects: state.json.objects
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Select);
// reducer file
const initialState = {
objects: {}
}
export const myReducer = (state = initialState, action) => {
switch (action.type) {
case TOGGLE_SELECT:
if (Object.keys(state.objects).includes("select")){
const new_state = {...state}
delete new_state.objects["select"]
return new_state
}
else {
return {
...state,
objects: {
...state.objects,
'select': ''
}
}
}
default:
return state
}
}
// actions.js
export function toggleSelect() {
return {
type: TOGGLE_SELECT
}
}

Answer 1

最好不要改变状态。更新时，可以执行以下操作：

const objects = { ...state.objects };
if (objects.select) {
delete objects.select;
} else {
objects.select = true; //set it truthy
}
return {
...state,
objects,
};

工作示例：

const { Provider, connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const initialState = {
objects: {},
};
//action types
const TOGGLE_SELECT = 'TOGGLE_SELECT';
// actions.js
function toggleSelect() {
return {
type: TOGGLE_SELECT,
};
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case TOGGLE_SELECT:
const objects = { ...state.objects };
if (objects.select) {
delete objects.select;
} else {
objects.select = true; //set it truthy
}
return {
...state,
objects,
};
default:
return state;
}
};
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
class Select extends React.Component {
render() {
return (
<div>
<input
type="checkbox"
onClick={this.props.toggleSelect}
checked={Object.keys(
this.props.syncObjects
).includes('select')}
/>
<div>
select enabled:
{String(
Object.keys(this.props.syncObjects).includes(
'select'
)
)}
</div>
<div>
select enabled (simpler example):
{String(Boolean(this.props.syncObjects.select))}
</div>
</div>
);
}
}
const mapDispatchToProps = {
toggleSelect,
};
const mapStateToProps = (state) => {
return {
syncObjects: state.objects,
};
};
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Select);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>