javascript - 使用动态键 react setState

Question

我在使用计算属性名称为 React 中的状态对象创建动态键时遇到了一个简单的问题，但在尝试了几个小时之后我不知道如何解决它。

有关详细信息，请参阅代码中的注释，以及下面的简短概述。

场景:用户点击给定页面内的一个选项，下面的updateSelection 方法被调用。此方法使用新信息更新状态。

问题:我认为(？)使用计算的属性名称 使键在对象内部是唯一的，并且以后任何同名的键都会被替换。在某些情况下，我想允许对同一页面进行多项选择，这是我无法弄清楚的部分。如果效果更好，我愿意将我的状态转换为对象数组。

state = {
  userSelection: {}
}

const updateSelection = page => {
  const { pageName, category, multiple } = page;

  const selection = {
    pageName,
    category
  }

  // If `multiple` is false, pages must be unique in the state object.
  // This currently works fine.
  if (!multiple) {
    this.setState(prevState => ({
      userSelection: {
        ...prevState.userSelection,
        [pageName]: selection
      }
    }));

    // New state for userSelection is now this:
    // { 
    //   Page 1: {pageName: "Page 1", category: X}, 
    //   Page 2: {pageName: "Page 2", category: Y}
    // }

    return;
  }

  // If `multiple` is true for a page, the same page key can be added to
  // the state object as long as the category is different. If the category
  // is the same, the page is replaced just like when `multiple` is false.
  // The desired result for userSelection would look something like this:
  // { 
  //   Page 1: {pageName: "Page 1", category: X}, 
  //   Page 2: {pageName: "Page 2", category: Y},
  //   Page 2: {pageName: "Page 2", category: Z},
  //   Page 2: {pageName: "Page 2", category: W, other unique props}
  // }
}

更新:对于删除页面，输入是 pageName，它可以作为参数传递给 deletePage 方法，类似于更新选择。

Answer 1

如果您希望为每个页面的多个值使用数组，如下所示:

{ 
  "Page 1": [ {pageName: "Page 1", category: X} ], 
  "Page 2": [
    {pageName: "Page 2", category: Y},
    {pageName: "Page 2", category: Z},
    {pageName: "Page 2", category: W, other unique props}
  ]
}

然后您可以修改以下代码来添加/替换数组中的项目:

function updateSelection ({pageName, category, multiple}) {
  const selection = {pageName, category} // assuming more props here
  if (!multiple) {} // TODO keep old code or change to arrays too
  
  this.setState(prevState => {
    const {userSelection} = prevState
    if (!userSelection.hasOwnProperty(pageName)) {
      userSelection[pageName] = []
    }
    let categoryWasReplaced = false
    const nextUserSelection = {
      ...userSelection,
      [pageName]: userSelection[pageName].map(item => {
        // TODO use .filter() if needed to remove from selection
        if (item.category === category) {
          categoryWasReplaced = true
          return selection
        }
        return item
      })
    }
    if (!categoryWasReplaced) {
      nextUserSelection[pageName].push(selection)
    }
    return {userSelection: nextUserSelection}
  })
}

// ### test ###
let state = {userSelection: {}}
const mockSetState = f => {
  state = {...state, ...f(state)}
}
const testUpdateSelection = updateSelection.bind({state, setState: mockSetState})
testUpdateSelection({pageName: 'Page 1', category: 'X', multiple: true})
testUpdateSelection({pageName: 'Page 2', category: 'Y', multiple: true})
testUpdateSelection({pageName: 'Page 2', category: 'Y', multiple: true})
testUpdateSelection({pageName: 'Page 2', category: 'Y', multiple: true})
testUpdateSelection({pageName: 'Page 2', category: 'Z', multiple: true})
testUpdateSelection({pageName: 'Page 2', category: 'W', multiple: true})
console.log(state)