使用推送将数组添加到对象中

Question

我正在练习使用 React Native 开发应用程序。一个简单的待办事项应用程序。问题是我无法添加具有 id 的任务，因为 我收到此错误 => 对象作为 React 子对象无效（发现：对象带有键 { taskName, taskId}).如果要呈现子集合，请改用数组。 我不明白我做错了什么，如果常量 taskToDo 等于一个对象，它告诉我 taskToDo 不是一个函数。

大概或几乎可以肯定逻辑不是最充分的，我也听取建议。

这是我的reduer

const initialState = {
    tasks: []
}


export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_TASK":
            return { ...state, tasks: [...state.tasks, action.payload] };
        case "COMPLETE_TASK":
            return {
                tasks: state.tasks.filter((task) => task !== action.payload)
            }

        default:
            return state
    }
}

这里是函数

    const dispatch = useDispatch()
    const [taskName, setTaskName] = useState();
    const tasks = useSelector(state => state.tasks)

    const handleAddTask = () => {
        const taskToDo = []
        taskToDo.push({
            taskName: taskName,
            taskId: `id-${taskName}`
        })
        dispatch(addTask(taskToDo))
    }

和按钮

 <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={styles.writeTaskWraper}
 >

        <TextInput
           placeholder='write a task'
           style={styles.input}
           onChangeText={text => setTaskName(text)}
           value={taskName}
        />

        <TouchableOpacity onPress={() => handleAddTask()}>
           <View style={styles.addWraper}>
              <Text style={styles.addText}>+</Text>
           </View>
        </TouchableOpacity>

 </KeyboardAvoidingView>

提前致谢

Answer 1

您正在将 taskToDo[] 的数组添加到 reducer 中的现有数组。通过将新对象添加到数组来尝试这种方式

const handleAddTask = () => {

    const taskToDo = {};

    taskToDo.taskName = taskName;
    taskToDo.taskId = `id-${taskName}`;
        
    dispatch(addTask(taskToDo))
}

使用推送将数组添加到对象中

Add array into object with push

arrays

reduce

react-native

redux

react-children