[英]functional component is not re-rendering when redux state changes
當 redux state 更改時,我的一個功能組件不會重新渲染:
當復選框被選中時,redux state 會正確更改,但組件不會重新渲染並且道具不會更新
我知道我應該使用鈎子,但現在,我想了解為什么這個組件沒有重新渲染? 因為我有一些像這樣的其他組件,它們可以正常使用 redux 狀態
Panel9.js:
import { connect } from 'react-redux'
import { registeredUserInput } from '../../actions'
function Panel9(props) {
return (
<div>
<input type="checkbox" onClick={(e) => props.registeredUserInput(e.target.checked)}/>
<span>search key</span>
<label for="sNum">from</label>
<input type="number" id="sNum" name="eNum" placeholder="1"/>
<label for="eNum">to</label>
<input type="number" id="eNum" name="eNum" placeholder="10000" />
</div>
)
}
const mapStateToProps = state => {
return {
tableBooleans: state.tableReducer
}
}
const mapDispatchToProps = dispatch => {
return {
registeredUserInput: bool => dispatch(registeredUserInput(bool))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Panel9)
tableReducer.js:
const initialState = {
registeredInput: false,
phoneUserInput: false
}
const tableReducer = (state = initialState, action) => {
//console.log(state, action)
switch (action.type) {
case 'REGISTERED_USER_INPUT':
state.registeredInput = action.bool
return state
case 'PHONE_USER':
return state
default:
return state
}
}
export default tableReducer
嘗試返回一個新的 state 而不是突變電流 state
case 'REGISTERED_USER_INPUT':
return {
...state,
registeredInput: action.bool
}
當您只返回state 時。 Redux 將忽略任何突變,因為它使用淺比較。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.