如何在不重新加載整個列表的情況下在我的組件 CoinRow 中偵聽此變量“編輯”的更改？

Question

我有一個渲染 rowComponent 的列表，直到這里一切正常，如下所示：

const [editing, setEditing] = useState(false);
 nav.setOptions({
                headerLeft: () => <Button
                    title='Edit'
                    onPress={() => { 
                            setEditing(!editing)
                >
                </Button>
<MyList>
    <CoinRow editing={editing}></CoinRow>
</MyList>

我有一個左按鈕，用於使用 setEditing 更改編輯的 state

所以現在我需要如何在這個組件中監聽這個變量的變化？

const CoinRow = ({ editing }) => {

    console.log('editing', editing)

但我從來沒有看到那個控制台，我不想重新加載所有行

Answer 1

如果您想監聽特定道具上的事件（在您的情況下是狀態更新），您需要使用useEffect掛鈎。

const [editing, setEditing] = useState(false);


useEffect(() => {
    //The code that need to fire when "editing" is update
    ...

    //By putting "editing" into this array, useEffect will listen on update on "editing"
}, [editing])

請注意， useEffect在組件的每次第一次渲染時渲染。