Bearbeiten von unveränderlichen Statuselementen

Question

Ich versuche, einige unveränderliche Daten zu aktualisieren. Allerdings mache ich es falsch und es funktioniert nicht.

Mein Verständnis, ich muss es eine einzigartige es übergeben (zB die key), so dass es weiß, welches Element im Zustand zu aktualisieren. Aber das mag falsch sein, und ich würde das gerne richtig machen. Ich versuchte den Helfer der Unveränderlichkeit, aber hatte keinen Erfolg.

Ich möchte auch verschachtelte Elemente in einem unveränderlichen Array aktualisieren/hinzufügen/entfernen.

Ich habe dies in einem codeSandbox für eine einfache 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

Index ist es, was update benötigt, um die Daten zu wissen, zu ändern.

Erstens Karte sicher, dass Ihre Karte einen Index zu erstellen:

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

Dann update den Index an die Unveränderlichkeit-Helfer übergeben werden, wie so: zu:

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

Answer 2

Paar Dinge,
1. Mit Blick auf Ihre Daten sehe ich keine pk Eigenschaft vielleicht ist es ein Tippfehler (versuchen Sie stattdessen die id Eigenschaft zu verwenden?).
2. Die key Stütze sollte auf dem Stammelement sein, das Sie bei jeder Iteration Ihrer map-Funktion zurückgeben.
3. Sie können nicht nur keine nativen Attribute zu einem nativen HTML-Element hinzufügen, anstatt Sie die data-* wie data-changeKey und über e.target.getAttribute('data-changeKey')

So etwas zugreifen können:

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'));