Question

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

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仍然认为新状态与先前状态相同，因此不会再次呈现。

为了使它与新数据一起呈现，我需要返回一个NEW数组。因此，在这种情况下，我不能简单地使用payments.getValue（）的值并在其上推送另一个数字。我需要从中创建一个新数组。

与订阅者设置状态后，视图未更新

1 个答案: