除了用于清理的函数之外，效果函数不得返回任何内容答案

【问题标题】：An effect function must not return anything besides a function, which is used for clean-up除了用于清理的函数之外，效果函数不得返回任何内容
【发布时间】：2020-11-20 17:11:12
【问题描述】：

我在 useEffect 函数中实现了 fetch 并收到以下错误： An Effect must not return anything besides a function, which is used for cleanup

这是相同的代码sn-p：

const Tab1 = () => {
    const [arr, updateArr] = useState([]);
    const [loading, setLoading] = useState(true);
    const myFunc = txt => {
        console.log("Hello");
        console.log(txt);
    }
    useEffect(() => {
        return fetch('http://testapi')
            .then((response) => response.json())
            .then((json) => updateArr(json))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);
    return (
        <View style={styles.container}>
            <FlatList
                data={arr.categories}
                renderItem={itemData => (
                    <TouchableOpacity
                        onPress={() => this.myFunc(itemData.item.cno)}
                    >
                        <View>
                            <Text>{itemData.item.cno}</Text>
                            <Text>{itemData.item.name}</Text>
                        </View>
                    </TouchableOpacity>
                )}
                keyExtractor={(item, index) => item.cno}
            />
        </View>
    )
}`

【问题讨论】：

错误信息是正确的。您不应返回 fetch 调用，而应直接调用它。所以：useEffect(() => { fetch(...)... }, []);
在您的代码中，useEffect 的函数返回一个Promise...只需remove 的return 语句，警告就会消失。如果useEffect 的函数有返回值，那应该是清理函数，而不是Promise
请不要将图像用于堆栈跟踪，如果可能，请始终将其作为文本粘贴到此处。

标签： reactjs react-native

【解决方案1】：

在useEffect 中删除return 将使其工作。

    useEffect(() => {
        fetch('http://testapi')
            .then((response) => response.json())
            .then((json) => updateArr(json))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

【讨论】：

【解决方案2】：

必须删除确切的返回

const Tab1 = () => {
const [arr, updateArr] = useState([]);
const [loading, setLoading] = useState(true);
const myFunc = txt => {
    console.log("Hello");
    console.log(txt);
}
useEffect(() => {
    fetch('http://testapi')
        .then((response) => response.json())
        .then((json) => updateArr(json))
        .catch((error) => console.error(error))
        .finally(() => setLoading(false));
}, []);
return (
    <View style={styles.container}>
        <FlatList
            data={arr.categories}
            renderItem={itemData => (
                <TouchableOpacity
                    onPress={() => this.myFunc(itemData.item.cno)}
                >
                    <View>
                        <Text>{itemData.item.cno}</Text>
                        <Text>{itemData.item.name}</Text>
                    </View>
                </TouchableOpacity>
            )}
            keyExtractor={(item, index) => item.cno}
        />
    </View>
)

【讨论】：

这只是已接受答案的扩展版本，不提供任何新信息。请始终检查您尝试发布的答案是否不存在。