javascript - React slice() 使用 immer 进行突变转换

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 3 年前。

Improve this question

我在将这段代码转换为不发生变异时遇到问题。

我尝试过使用 immer，但我是新的 React 和 js

handleChange(nextField) {
    const { selectedIndex } = this.state
    const bookCopy = this.props.value.book.slice()

    bookCopy[selectedIndex].field_book_notes = nextField
    const nextValue = {
      ...this.props.value,
      books: bookCopy,
    }
    this.props.onChange(nextValue)
  }

有人建议我使用 immer 来解决突变问题。我已经到目前为止，但不知道如何处理 nextValue = { ...this.props.value, 书籍:bookCopy，......等等

handleChange(nextField) {
    const { selectedIndex } = this.state
    const bookCopy = product(this.props.value.book) => {

    bookCopy[selectedIndex].field_book_notes = nextField

......

Answer 1

如果您不想改变初始数组 this.props.value.book 您应该使用 map

试试这个

handleChange(nextField) {
    const { selectedIndex } = this.state;
    const nextValue = {
      ...this.props.value,
      books: this.props.value.book.map((el, index) => {
        if (index !== selectedIndex) return el;
        return {
           ...el,
           field_book_notes: nextField
        }
      }),
    }
    this.props.onChange(nextValue)
  }