时间戳

首页 > 解决方案 > React Native滚动视图无限重新渲染

reactjs - React Native滚动视图无限重新渲染

问题描述

我是原生反应新手，我正在创建一个待办事项列表应用程序。当我将 Todos 状态初始化为非空数组时，我编写的组件会不断地重新渲染。这会导致反应停止它的错误。我不知道是什么导致了无限循环，因为我没有包含任何递归或显式循环。我到处添加了一些console.log()，发现deleteTodo 和toggleTodo 一直被自动调用，直到应用程序崩溃。

当 Todos 状态初始化为空数组时，我收到一条错误消息，指出 getTodos.map 不是函数。

只有当状态更新为 modify 、 add 或 delete 任务时，该组件才会重新渲染。 

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

标签： reactjsreact-nativescrollview

解决方案

您的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 }])

推荐阅读