Question

我试图增加给定习惯的理货属性，在这种情况下，我的目标是：4。在相关的说明中，我愿意接受有关更好的结构化方法的建议我的数据。

for (int i = 0; i < inputArray.length; i++)

以下是我在搜索解决方案后尝试过的实施方案。我不相信它正在工作，因为在我通过事件处理程序调用增量函数后，使用安装后工作的.find（）的赋值被破坏 - 让我相信.find（）不再是在数组上调用。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      displayedHabit: "Exercise",
      currentUser: "Achilles",
      userList: [
          {
            user: "Achilles",
            id: 0,
            habits: [
            {
              habit: "Exercise",
              tally: 123
            },
            {
              habit: "Eat Vegetables",
              tally: 4
            },

          ]
        }
      ]
    }
  }

Answer 1

在React中，不要改变数据结构是非常重要的。这实际上意味着您必须在嵌套数据的每个级别复制数据结构。由于这是太多的工作，我建议你使用为此目的而制作的库。我个人使用object-path-immutable。

示例：

import {set} from 'object-path-immutable';

increment = ({userIndex, habitIndex}) => this.setState({
    userList: set(this.state.userList, [userIndex, 'habits', habitIndex, 'tally'], this.state.userList[userIndex].habits[habitIndex].tally + 1)
});

Answer 2

我建议重组您的数据，以便您拥有以可访问的方式实际映射数据的对象，即：

this.state = {
  displayedHabit: "Exercise",
  currentUser: "Achilles",
  userList: {
   "Achilles": { // Could also be id
        id: 0,
        habits: {
         "Exercise": 123,
         "EatVegetables": 4
      }
    }
  }
}

这可以让你做类似

的事情

 increment = () => {
  const {userList} = this.state;
  this.setState({
    userList: {
      ...userList,
      Achilles: {
        ...userList.Achilles
        habits: {
          ...userlist.Achilles.habits
          'EatVegetables': userlist.Achilles.habits.EatVegetables + 1
        }
      }
    }
  })
}

这将通过使用object-path-immutable进一步简化，这将允许您做一些简单的事情：

increment = () => {
  const {userList} = this.state;
  this.setState({
    userList: immutable.set(userList, 'Achilles.id.habits.Exercise', userList.Achilles.id.habits.Exercise + 1)
  })
}

为了使这更通用，虽然我建议做类似于地球建议的东西：

从＆＃39; object-path-immutable＆＃39;;

导入{set}

incrementUserHabit = ({userIndex, habitIndex}) => this.setState({
    userList: set(this.state.userList, [userIndex, 'habits', habitIndex, 'tally'], this.state.userList[userIndex].habits[habitIndex].tally + 1)
});

这样您的代码就可以重复使用了

Answer 3

这样的东西？

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      userList: {
        '12': {
          name: 'Achilles',
          habits: {
            Exercise: {
              tally: 123
            },
            'Eat Vegetables': {
              tally: 231
            }
          }
        }
      }
    }
  }

  inc() {
    const {userList} = this.state;
    userList['12'].habits['Exercise'].tally++;
    this.setState({userList});
  }

  render() {
    return (
      <div>
        <h2>{this.state.userList['12'].habits['Exercise'].tally}</h2>
        <button onClick={() => this.inc()}>Increment</button>
      </div>
    )
  }
};

在这里玩它： https://codesandbox.io/s/10w0o6vn0l

如何在React中设置深层嵌套属性？

3 个答案: