Redux状态更改，但组件未重新绘制

Question

我的问题是我的redux状态正在更新(我可以在redux dev工具中看到它(，但我的组件没有更新，它没有放入数组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)没有改变。我是一个新手，不完全理解传播语法，也许问题就在这里，但没有找到任何东西，希望你能帮助我：(。

Answer 1

Array.length是Arrays的原型属性。你不能那样用它。默认情况下始终为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}]}