如何在不重新加载整个列表的情况下在我的组件 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在组件的每次第一次渲染时渲染。