javascript - setState 中的嵌套项目(非突变)

Question

我正在尝试(不改变状态)更新嵌套的值。

结果应该来自:[{ name: "hello", id:20, 流派: [{ name: 'baz', id: 2 }, { name: 'foo', id: 200 }] }, { name: "hi"，id:12，流派:[] }]

至[{ name: "hello", id:20, 流派: [{ name: 'test', id: 2 }, { name: 'foo', id: 200 }] }, { name: "hi"，id:12，流派:[] }]

我已找到我想要更新的项目的index - nestedIndex。不过，使用 ID 进行匹配也可以找到(如果 index 不是一个好主意)。

我在这里尝试过:

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

如何更新 setState 中的嵌套项？

这是一个工作示例: https://codesandbox.io/s/rl6yoyz1rm

这是我的完整代码:

  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根据需要通过元素和传播 Prop 。

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>