React Native滚动视图无限重绘制

Question

我是新来的本地react，我正在创建一个待办事项列表应用程序。当我将Todos状态初始化为非空数组时，我编写的组件会无限地重新渲染。这导致了一个错误，react停止了它。我不知道是什么导致了无限循环，因为我没有包括任何递归或显式循环。我到处添加了一些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 }])