setState（ネストされていない）のネストされたアイテム

Question

入れ子になっている値を更新しようとしています。私はnestedIndexをupdate-したい項目のindexに位置している [{ name: "hello", id:20, genre: [{ name: 'test', id: 2 }, { name: 'foo', id: 200 }] }, { name: "hi", id:12, genre: [] }]

に [{ name: "hello", id:20, genre: [{ name: 'baz', id: 2 }, { name: 'foo', id: 200 }] }, { name: "hi", id:12, genre: [] }]

：

結果から行く必要があります。ただし、IDを使用して一致させることもできます（indexが良い考えではない場合）。

私はここでそれを試みた：

return item.name === x.name ? { ...item, name: e.target.value, genre[nestedIndex].name: 'test' } : item

をどのようにSETSTATEでネストされたアイテムを更新しますか？

state = { 
    search: "", 
    items: [{ name: "hello", id:20, genre: [{ name: 'baz', id: 2 }, { name: 'foo', id: 200 }] }, { name: "hi", id:12, genre: [] }] 
    }; 

    onChange(e, x) { 
    const { items } = this.state 
    const index = items.findIndex(itm => itm.name === x.name) 
    const nestedIndex = [items[index]].map(e => e.genre).pop().findIndex(itm => itm.id === 2) 
    this.setState({ 
     items: items.map(item => { 
     return item.name === x.name ? { ...item, name: e.target.value } : item 
     }) 
    }); 
    } 

    render() { 
    const { items } = this.state; 
    return (
     <div> 
     {items.map((x) => { 
      return (
      <div> 
       {" "} 
       {x.name} 
       {x.genre.map((itm) => { 
       return <i> {itm.name}</i>; 
       })} 
       <input onChange={e => this.onChange(e, x)} type="text" /> 
      </div> 
     ); 
     })} 
     </div> 
    ); 
    } 
} 

Answer 1

あなたはまた、別のネストされた配列を持つことが起こるの配列を更新しているので、あなたのアイテムをmapことができますと： ここhttps://codesandbox.io/s/rl6yoyz1rm

は私の完全なコードです。ここで

は実施例でありますあなたが必要に応じて小道具を広げる。

class App extends React.Component { 
 
    constructor() { 
 
    super() 
 

 
    this.state = { 
 
     items: [{ 
 
     name: 'hello', 
 
     id: 20, 
 
     genre: [{ name: 'baz', id: 2 }, { name: 'foo', id: 200 }], 
 
     }, 
 
     { name: 'hi', id: 12, genre: [] },] 
 
    } 
 

 
    this.onChange = this.onChange.bind(this) 
 
    } 
 

 
    onChange(event, clickedItem) { 
 
    const { items } = this.state 
 
    const index = items.findIndex(item => item.name === clickedItem.name) 
 
    const nestedIndex = items[index].genre.findIndex(genre => genre.id === 2) 
 
    
 
    const { value } = event.target 
 
    this.setState(prevState => ({ 
 
     items: prevState.items.map((item, itemIndex) => { 
 
     if (index !== itemIndex) { 
 
      return item 
 
     } 
 
    
 
     return { 
 
      ...item, 
 
      genre: item.genre.map((genre, gIndex) => { 
 
      if (gIndex !== nestedIndex) { 
 
       return genre 
 
      } 
 
    
 
      return { 
 
       ...genre, 
 
       name: value, 
 
      } 
 
      }) 
 
     } 
 
     }) 
 
    })) 
 
    } 
 

 
    render() { 
 
    const { items } = this.state; 
 
    return (
 
     <div> 
 
     {items.map((x) => { 
 
      return (
 
      <div> 
 
       {" "} 
 
       {x.name} 
 
       {x.genre.map((itm) => { 
 
       return <i> {itm.name}</i>; 
 
       })} 
 
       <input onChange={e => this.onChange(e, x)} type="text" /> 
 
      </div> 
 
     ); 
 
     })} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>