React Native中useState Hook无法更新数组的问题求助

问题描述 #

使用React Native开发待办清单应用时，尝试通过useState Hook向数组添加新任务并渲染，但无法成功添加元素。先后尝试两种setTaskItems写法均无效：

setTaskItems([...taskItems, task]);

setTaskItems(taskItems => [...taskItems, task]);

相关代码片段 #

const [task, setTask] = useState('');
const [taskItems, setTaskItems] = useState([]);

const handleAddTask = () => {
  Keyboard.dismiss();
  setTaskItems([...taskItems, task]);
  console.log(task);
  console.log(taskItems);
}

完整代码（不含样式） #

import React, {useState} from 'react';
import { KeyboardAvoidingView, StyleSheet, Text, View, TextInput, TouchableOpacity, Platform, Keyboard, ScrollView } from 'react-native';
import Task from './components/Task';

export default function App() {
  const [task, setTask] = useState('');
  const [taskItems, setTaskItems] = useState([]);

  const handleAddTask = () => {
    Keyboard.dismiss();
    const newTaskItems = [...taskItems, task];
    setTaskItems(newTaskItems);
    console.log(task);
    console.log(taskItems);
    setTask(' ');
  }

  const completeTask = (index) => {
    let itemsCopy = [...taskItems];
    itemsCopy.splice(index, 1);
    setTaskItems(itemsCopy)
  }

  return (
    <View style={styles.container}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1
        }}
        keyboardShouldPersistTaps='handled'
      >
        <View style={styles.tasksWrapper}>
          <Text style={styles.sectionTitle}>Today's tasks</Text>
          <View style={styles.items}>
            {
              taskItems.map((item, index) => {
                return (
                  <TouchableOpacity key={index}  onPress={() => completeTask(index)}>
                    <Task text={item} />
                  </TouchableOpacity>
                )
              })
            }
          </View>
        </View>
      </ScrollView>

      <KeyboardAvoidingView 
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={styles.writeTaskWrapper}
      >
        <TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text => setTask(text)} />
        <TouchableOpacity onPress={() => handleAddTask()}>
          <View style={styles.addWrapper}>
            <Text style={styles.addText}>+</Text>
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
      
    </View>
  );
}

问题分析与解决方案 #

1. setState异步特性导致console.log误判 #

setTaskItems是异步操作，调用后立即console.log(taskItems)会输出旧的数组状态，容易误以为任务没添加成功。要查看更新后的状态，需用useEffect监听数组变化：

import React, {useState, useEffect} from 'react'; // 引入useEffect

// ... 其他代码

useEffect(() => {
  console.log('当前任务列表:', taskItems);
}, [taskItems]); // 仅当taskItems变化时执行

2. 未过滤空白任务+错误清空输入框 #

• 原代码中setTask(' ')会将输入框设为空格而非空字符串，可能导致添加空白任务，且下次输入会带前置空格。
• 添加任务前未过滤空白内容，点击加号时可能添加空/空格任务，导致渲染无视觉效果。

修正handleAddTask函数：

const handleAddTask = () => {
  Keyboard.dismiss();
  // 去除任务文本前后空格，避免添加空内容
  const validTask = task.trim();
  if (validTask) {
    // 使用函数式更新确保拿到最新的任务数组
    setTaskItems(prevItems => [...prevItems, validTask]);
    setTask(''); // 清空输入框为空白字符串
  }
}

3. 检查Task组件是否正确渲染 #

确保./components/Task.js正确接收并渲染text属性，示例实现：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Task = ({ text }) => {
  return (
    <View style={styles.taskCard}>
      <Text style={styles.taskText}>{text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  taskCard: {
    backgroundColor: '#f9f9f9',
    padding: 12,
    borderRadius: 8,
    marginVertical: 8,
    flexDirection: 'row',
    alignItems: 'center',
  },
  taskText: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
});

export default Task;

验证修正效果 #

完成上述修改后，输入任务文本点击加号，即可正常添加任务并渲染；点击任务可删除，输入框会正确清空。

内容的提问来源于stack exchange，提问作者Lucyy