从状态中删除值（设置新状态）

Question

我试图从我的状态中删除值。

我使用.filter，因为我相信这是最简单的方法。我也想实现一个undo函数（但这超出了这个问题的范围）。

我已经把这个代码在沙箱中 https://codesandbox.io/s/yrwo2PZ2R

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: x.movies, 
    }; 
    } 
remove = (e) => { 
    e.preventDefault(); 
    console.log('remove movie.id:', e.target.value) 
    const index = e.target.value 
    this.setState({ 
    movies: this.state.movies.filter((_, e) => e.id !== index) 
    }); 
} 
    render() { 
    return (
     <div> 
     {this.state.movies.map(e => 
      <div key={e.id}> 
      <li>{e.name} {e.id}</li> 
      <button value={e.id} onClick={this.remove}>remove</button> 
      </div>, 
     )} 
     </div> 
    ); 
    } 
} 

Answer 1

两个问题。

首先，您从事件目标值获得的索引是一个字符串，但是您正在与一个数字进行比较。更改索引声明如下：

const index = Number(e.target.value); 

其次，您的过滤器是有点关闭。这将工作：

this.state.movies.filter(movie => movie.id !== index) 

Answer 2

可以实现以下方式

remove = (e) => { 
    e.preventDefault(); 
    console.log('remove movie.id:', e.target.value) 
    const index = e.target.value 
    var movies = [...this.state.movies] 
    var idx = movies.findIndex((obj) => obj.id === parseInt(index)) 
    movies.splice(idx, 1); 

    this.setState({ 
    movies 
    }); 
} 

还可以使用parseInt函数在比较之前指数转换为字符串相同。 由于setState是异步的，因此直接从以前的状态值设置当前状态可能会导致问题。理论上，应该创建对象的副本，并删除使用对象拼接方法

CODESANDBOX

Answer 3

问题是index具有字符串类型，但在ID对象具有number类型。你需要类型转换，例如：

比

const index = Number(e.target.value); 

其他，你filter函数调用的回调有一些错误_。你不需要它。您需要：

this.state.movies.filter(e => e.id !== index) 

顺便说一句，我不建议这样命名值。为什么e？你有一系列的电影。使用movie。为什么index？你有id要删除。然后使用idToRemove名称。

您也有添加项目的问题。

首先，你可以添加项目是这样的：

this.setState({ 
    movies: [...this.state.movies, { name: item.value.name, id: item.value.id }], 
}) 

还有一点：你必须自动增量ID。您可以将最后一个值存储在变量中。例如，this.idCounter。而添加的样子：

this.setState({ 
    movies: [...this.state.movies, { name: item.value.name, id: this.idCounter++ }], 
}) 

例子：https://codesandbox.io/s/2vMJQ3p5M