不変の状態項目の編集

Question

不変なデータを更新しようとしています。しかし、私はそれを間違ってやっているし、うまくいきません。

私の理解では、ユニークなもの（例：key）を渡す必要がありますので、更新するアイテムの状態を知ることができます。しかし、これは間違っている可能性があり、私はこれを適切な方法でやりたいと思います。私は不変のヘルパーを試みたが、成功しなかった。

また、変更可能な配列のネストされた項目を更新/追加/削除したいと考えています。

私は容易https://codesandbox.io/s/mz5WnOXn

class App extends React.Component { 
    ... 
    editTitle = (e,changeKey) => { 
    this.setState({ 
    movies: update(this.state.movies, {changeKey: {name: {$set: e.target.value}}}) 
    }) 
    console.log('Edit title ran on', key) 
    }; 

    ... 

    render() { 
    ... 
    return (
     <div> 
     {movies.map(e => { 
      return (
      <div> 
       <input key={e.pk} onChange={this.editTitle} value={e.name} changeKey={e.pk} type="text" /> 
       With genres: 
       {e.genres.map(x => { 
       return (
        <span key={x.pk}> 
        <input onChange={this.editGenres} value={x.name} changeKey={x.pk} type="text" /> 
        </span> 
       ); 
       })} 
      </div> 
     ); 
     })} 
     </div> 
    ); 
    } 
} 

Answer 1

ためcodeSandboxでこれを置く指数が変化するデータを知るために何updateニーズです。

まず、あなたのマップは、インデックスを作成していることを確認マップ：、物事の

editTitle = (e, index) => { 
    this.setState({ 
    movies: update(this.state.movies, {[index]: {name: {$set: e.target.value}}}) 
    }) 

Answer 2

カップル
を： へ：

{movies.map((e,index) => { 
return (
      <input key={e.pk} onChange={e => this.editTitle(e, index)} value={e.name} > 
... 

はその後そうのような不変性ヘルパーupdateにインデックスを渡します 1.あなたのデータを見ると、pkのプロパティが表示されないかもしれません（代わりにidプロパティを使用しようとしていますか？）。
2. key小道具は、map関数の各繰り返しで返されるルート要素に置く必要があります。

import { render } from 'react-dom'; 
import React from 'react'; 
import { reject, pluck, prop, pipe, filter, flatten, uniqBy } from 'ramda'; 
import { smallData } from './components/data.js'; 
import './index.css'; 
import Result from './components/Result'; 
import update from 'react-addons-update'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: smallData.movies, 
     selectedFilters: {}, 
     searchQuery: '', 
    }; 
    } 
    editTitle = (e) => { 
    const attr = e.target.getAttribute('data-changeKey'); 
    this.setState({ 
     movies: update(this.state.movies, { 
     // what are you trying to do here? 
     //changeKey: { name: { $set: e.target.value } }, 
     }), 
    }); 
    console.log('edit title ran on', attr); 
    }; 

    onSearch = e => { 
    this.setState({ 
     searchQuery: e.target.value, 
    }); 
    }; 

    render() { 
    const { movies } = this.state; 
    return (
     <div> 
     {movies.map((e, i) => { 
      return (
      <div key={i}> 
       <input 
       onChange={this.editTitle} 
       value={e.name} 
       data-changeKey={e.id} 
       type="text" 
       /> 
       With genres: 
       {e.genres.map((x,y) => { 
       return (
        <span key={y}> 
        <input 
         onChange={this.editTitle} 
         value={x.name} 
         data-changeKey={x.id} 
         type="text" 
        /> 
        </span> 
       ); 
       })} 
       Add new genre: 
       <input type="text" /> 
      </div> 
     ); 
     })} 
     </div> 
    ); 
    } 
} 

render(<App />, document.getElementById('root'));