与订户设置状态后视图未更新

Question

我遇到了一个奇怪的问题，我的组件在设置状态后没有更新它的视图。在视图中，使用 payments 数组状态中的值呈现了一堆文本组件。

const Payments: (props: Props) => any = (props: Props): JSX.Element => {
const [payments, setPayments] = useState<Array<number>>([]);

useEffect(() => {
    PaymentsService.payments.subscribe((value: Array<number>) => {
        console.log(`State being set with the following value:`);
        console.log(value);
        setPayments(value);
    })
});

const array = payments.map(p => {
    return <Text>{`${p}`}</Text>
});

console.log("New text array:");
console.log(array);

const handleOnPress = () => {
    PaymentsService.addPayment();
};

return (
    <View style={ props.themedStyle!.container }>
        <Text>This is the payments page.</Text>
        {array}
        <Button onPress={handleOnPress}/>
    </View>
  );
};

当 PaymentsService 中的付款发生变化时，订阅者会收到新值的通知，然后使用 setPayments 将状态设置为新值。

import { BehaviorSubject } from "rxjs";

const initialPayments: Array<number> = [ 34, 43, 114, 43 ];
const payments: BehaviorSubject<Array<number>> = new BehaviorSubject<Array<number>>(initialPayments);

const addPayment = () => {
    const newPayments = payments.getValue();
    newPayments.push(Math.random() * 100);
    payments.next(newPayments);
};

export default {
    payments,
    addPayment
}

当我添加新付款时，PaymentsService 中的付款数组得到更新。然后视图中的订阅者会收到正确值的通知。

我不明白是什么阻止了视图更新，如果它被提供了新值？

Answer 1

我找到问题了。 React 仍然认为新状态与之前的状态相同，因此不会再次渲染。

为了让它使用新数据呈现，我需要 return 一个新数组。所以在这种情况下，我不能简单地使用 payments.getValue() 的值并在其上推送另一个数字。我需要用它创建一个新数组。

与订户设置状态后视图未更新

View not being updated after setting state with subscriber

reactjs

react-native

rxjs

observer-pattern