Redux 状态改变但组件不重新渲染

Question

我的问题是我的 redux 状态正在更新（我可以在 redux 开发工具中看到它）但我的组件没有更新，它没有放入我的数组的最后一个值 initialState.userWeight 这是我的减速器的样子：

case 'NEWWEIGHT':
           const weight = action.payload.weight
           const date = action.payload.date
           state.userWeight = [...state.userWeight, {weight: weight, date: date}]
           return {...state}

这是我的初始状态：

const initialState = {
    userName: '',
    userSize: 0,
    userWeight: [],
    userDate: '',
}

这是我的组件的样子：

    const userWeightRedux = useSelector(state => state.userInfo.userWeight[Array.length - 1].weight)

    console.log(userWeightRedux)

...
<Text style={styles.user}>{userWeightRedux}</Text>

所以console.log(userWeightRedux)没有改变。我是 React、redux 的新手，并不完全理解传播语法，也许问题就在这里，但没有找到任何东西，希望你能帮助我 :).

Answer 1

Array.length 是数组的原型属性。你不能那样使用它。默认情况下始终为 1。因此您始终检索 state.userInfo.userWeight 的第一个元素。改用：

const userWeightRedux = useSelector(state => state.userInfo.userWeight[state.userInfo.userWeight.length - 1].weight)

或更温和的语法：

const userWeightRedux = useSelector(state => state.userInfo.userWeight.slice(-1)[0].weight)

Answer 2

尽管其他答案能更好地解决您的具体问题...

你正在改变你的状态。尽管您正在返回一个新的状态对象，但您却让旧状态变得一团糟。这会导致微妙的问题。不要改变减速器中的任何东西。所以...

// this line mutates the "outgoing" state
state.userWeight = [...state.userWeight, {weight: weight, date: date}]
return {...state}

应该改写为：

return {...state, userWeight: [...state.userWeight, {weight: weight, date: date}]}

Redux 状态改变但组件不重新渲染

Redux State changes but component not rerendering

javascript

reactjs

react-native

redux

react-redux