javascript - 如何删除从列表中呈现的组件？ react native

Question

我一直在关注这个tutorial for ReactJS现在一直在尝试将简单的 Todo 应用程序(仅检查项目)转换为 React Native。我一直在使用 expo 在我的手机和其他设备上进行现场尝试。

一切都很顺利，但现在我想添加一些东西。每当我单击该复选框时，我想删除与该项目相关的组件。

我的想法是:

Since I'm rendering the TodoItem components from an array of todos, and whenever I click a checkbox it updates the array as a whole (looking for a certain id and updating it's completed variable). I can run through the array and whenever the id is different I return the todo. This way I returned every todo but the one with matching id to be rendered.

import React, { Component }  from 'react';
import { Alert,Image,StyleSheet, Text,Button, View } from 'react-native';
import TodoItem from './TodoItem'
import todosData from "./todosData"

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      todos: todosData
    }

    this.handleChange = this.handleChange.bind(this)

  }


  handleChange(id) {
    this.setState(prevState => {
      const updatedTodos = this.state.todos.map( todo => {
    if(todo.id !== id) {
      return todo
    }

  })
  return {
    todos:updatedTodos
  }
})
  }
  render() {

const todoItems = this.state.todos.map( item =>
  <TodoItem
    key={item.id}
    item={item}
    handleChange = {this.handleChange}
  />
)
return (
  <View style={styles.container}>

    {todoItems}

  </View>
    );
  }
}

这会产生错误:“TypeError:undefined is not an object (evaluating 'item.id')”，给出 App.js:42:18

我还将添加引用 TodoItem 的代码:

import React, { Component }  from 'react';
import { Alert,Image,StyleSheet, Text,Button, View } from 'react-native';
import { CheckBox } from 'react-native-elements'
function TodoItem(props) {
  return (
    <View>
    <CheckBox
      checked={props.item.completed}
      onPress={() => props.handleChange(props.item.id)}
    />
    <Text>{props.item.text}</Text>


    </View>
  );
}
export default TodoItem

我不明白为什么这不起作用。感觉就像我在删除组件的同时仍在使用它(因为它给出了未定义)，但我不知道在哪里。因为我只是简单地更新待办事项列表。我怎样才能做我想做的事情？

PS:我似乎无法正确格式化第一段代码。对此我深表歉意!

Answer 1

试试这个:

handleChange(id) {
  const { todos } = this.state
  // filter out the deleted one
  const filtered = todos.filter(x => x.id !== id)

  this.setState({ todos: filtered })
}

我们不想直接改变状态，但由于 .filter() 创建一个新数组，而不触及给定数组，因此可以使用它。如果是另一个操作，你会这样做:

// create a copy
const newSomethings = [...this.state.somethings]
// do whatever with newSomethings
this.setState({ somethings: newSomethings })