從狀態中刪除值（設置新狀態）

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