Реагировать на нативную прокрутку бесконечно

Question

Я новичок, чтобы реагировать на нативные, и я создаю приложение, чтобы сделать список. Компонент, который я написал, постоянно рендерится, когда я инициализирую состояние Todos чем-то, что не является пустым массивом. Это приводит к ошибке, когда реакция останавливает ее. Я понятия не имею, что вызывает бесконечное l oop, так как я не включил рекурсию или явные циклы. Я добавил несколько console.log () везде и обнаружил, что deleteTodo и toggleTodo продолжают вызываться автоматически до тех пор, пока не произойдет сбой приложения.

Когда состояние Todos инициализируется в пустой массив, я получаю сообщение об ошибке, в котором говорится, что getTodos. map не является функцией.

Ожидается, что компонент будет повторно отображаться только при обновлении состояния для изменения, добавления или удаления задачи.

import React, { useState } from 'react'
import { Platform, StyleSheet, Text, View, TouchableHighlight } from 'react-native'
import { State, ScrollView } from 'react-native-gesture-handler'
/* All required imports are correctly added */

let id = 0
function TaskRow(props) {
    return (
        <View>
            {/* empty button acting as checkbox */}
            <TouchableHighlight>
                <Text />
            </TouchableHighlight>
            {/* main text area, displays task and all details + tags*/}
            <TouchableHighlight onPress={props.toggle(props.key)}>
                <Text>{props.task}</Text>
            </TouchableHighlight>
            {/* delete button */}
            <TouchableHighlight onPress={props.delete(props.key)}>
                <Text>Delete</Text>
            </TouchableHighlight>
        </View>
    )
}

export default function TodoList() {
    const [
        getTodos,
        setTodos,
    ] = useState([
        { key: id, task: 'this is a task', checked: false },
    ])

    const addTodo = (taskInput = 'sample') => {
        id++
        setTodos(getTodos.push({ key: id, task: 'task', checked: false }))
    }

    const deleteTodo = (deleteID) => {
        setTodos(getTodos.filter((match) => match.key !== deleteID))
    }

    const toggleTodo = (toggleID) => {
        setTodos(
            getTodos.map((match) => {
                if (match.key == toggleID) return { key: match.key, task: match.task, checked: !match.checked }
            }),
        )
    }

    return (
        <View>
            <TouchableHighlight onPress={addTodo}>
                <Text>Add task</Text>
            </TouchableHighlight>
            <ScrollView>
                {getTodos.map((task) => (
                    <TaskRow
                        key={task.key}
                        task={task.task}
                        delete={deleteTodo}
                        toggle={toggleTodo}
                    />
                ))}
            </ScrollView>
        </View>
    )
}

Answer 1

У вас есть проблема в компоненте TaskRow, при каждом рендеринге вы фактически вызываете функции, а не объявляете обработчик для событий. Пожалуйста, измените эти две строки следующим образом:

// ...
<TouchableHighlight onPress={() => props.toggle(props.key)}>
// ...
<TouchableHighlight onPress={() => props.delete(props.key)}>

Другая проблема заключается в следующем:

setTodos(getTodos.push({ key: id, task: 'task', checked: false }))

.push() не возвращает массив, поэтому вы должны сделать что-то вроде:

setTodos([...getTodos, { key: id, task: 'task', checked: false }])