当子组件通过 props 回调修改状态时，useEffect 不会触发

Question

我有一个 Flatlist 组件，它将其状态和 setState 传递给子组件。子组件确实更改了父组件的状态（尝试使用 setinterval 和 console.log 显示状态）但是当更改发生时我无法收听。我尝试使用

useEffect(()=>{
console.log(`listState:`, state);
},[state]);

但它从不触发，除非在安装时触发。这是我的代码。

// in CheckboxFlatList.js  (parent)
import React, { useState, useEffect, useRef } from 'react';
import { View, StyleSheet, Dimensions, Text } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import CheckBox from "./Checkbox";


function CheckboxFlatList(props) {
    const [state, setState] = useState([]);

    useEffect(() => {
        console.log(`listState:`, state);
    },[state]);

    // setInterval(() => {
    //     console.log(`listState:`, state);
    // },3000 );

    return (
        <View>
            <FlatList
                data={data}
                keyExtractor={item => item.id.toString()}
                renderItem={({ item }) => (
                    <View>
                        <View>
                            <CheckBox id={item.id.toString()} listState={state} stateMerge={setState} isChecked={state.some(x => x === item.id.toString())} />
                            <Text>{item.name}</Text>
                        </View>
                    </View>
                )}
            />
        </View >
    );
}

// in Checkbox.js  (child)
import React, { useState, useEffect, useRef, memo } from 'react';
import { CheckBox } from 'react-native-elements';

export default memo(

    function Checkbox(props) {
        let { listState, stateMerge, isChecked, id } = props;
        const [toggleCheckBox, setToggleCheckBox] = useState(isChecked);

        const mounted = useRef();
        useEffect(() => {
            if (!mounted.current) {  // do componentDidMount logic
                mounted.current = true;
            } else {  // do componentDidUpdate logic

                if (toggleCheckBox) {
                    if (!listState.some(x => x === id)) {   //to avoid a duplication bug
                        listState.push(id);
                    }

                } else {
                    while (listState.some(x => x === id)) {   //to avoid a duplication bug
                        let index = listState.indexOf(id);
                        if (index !== -1) listState.splice(index, 1);
                    }
                }
                stateMerge(listState);
            }
        });


        return (
            <CheckBox checked={toggleCheckBox} size={40} onPress={() => {
                setToggleCheckBox(!toggleCheckBox);

            }} />
        );
    });

非常感谢您的帮助！

Answer 1

公认的答案是一种临时解决方案，并引入了另一个错误：如果对状态执行无操作更新，则会触发效果。

useEffect 回调未触发，因为 dep 的引用标识未更改。通过重新定义对象来强制使用新的引用身份只会治疗症状。一般来说，您应该着眼于解决根本原因。

在您的情况下，引用身份没有改变是违反 React 状态假设的症状。对状态的更改应始终使用适当的 setter 函数/方法来完成，而不是通过变异来完成。

以下代码块中的违规代码改变了 React 状态。

            if (toggleCheckBox) {
                if (!listState.some(x => x === id)) {   //to avoid a duplication bug
                    listState.push(id);
                }

            } else {
                while (listState.some(x => x === id)) {   //to avoid a duplication bug
                    let index = listState.indexOf(id);
                    if (index !== -1) listState.splice(index, 1);
                }
            }
            stateMerge(listState);

我们可以通过消除突变来修复它。当我们在不使用突变的情况下编写它时，标识自然只有在值发生变化时才会发生变化。

        stateMerge(listState => 
            if (toggleCheckBox) {
                if (!listState.some(x => x === id)) {   //to avoid a duplication bug
                    return [...listState, id];
                } else {
                    return listState;
                }
            } else {
                return listState.filter(x => x !== id);
            }
        );

你应该看到useEffect在状态改变的任何时候触发，而当它没有改变时不会触发。

Answer 2

在你的 Checkbox.js 你调用 stateMerge/setState 回调的地方

像这样将 listState 传递给 stateMerge

stateMerge([...listState])

将正确触发useEffect