Блог

Главная - Вопросы по программированию - Функция эффекта не должна возвращать ничего, кроме функции, которая используется для очистки

Функция эффекта не должна возвращать ничего, кроме функции, которая используется для очистки

#reactjs #react-native

#reactjs #react-native

Вопрос:

Я реализовал выборку внутри функции useEffect и получил следующую ошибку: эффект не должен возвращать ничего, кроме функции, которая используется для очистки

Вот фрагмент кода для того же:

 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>
    )
}`

Комментарии:

1. Сообщение об ошибке правильное. Вы не должны возвращать fetch вызов, а просто вызывать его. Итак: useEffect(() => { fetch(...)... }, []);

2. В вашем коде функция useEffect возвращает a Promise … Просто remove оператор return и предупреждение исчезнут. Если функция useEffect возвращает что-то, это должна быть функция очистки, а не Promise

3. Пожалуйста, не используйте изображения для трассировки стека, всегда вставляйте их сюда как текст, если это возможно.

Ответ №1:

Удаление return внутри useEffect заставит его работать.

     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>
)

}`

Комментарии:

1. это только расширенная версия принятого ответа и не предоставляет никакой новой информации. Пожалуйста, всегда проверяйте, не существует ли ответа, который вы пытаетесь опубликовать.