Question

根据给定 ID 更新对象的最佳方法

2019-07-10

1708

javascript arrays reactjs

我正在开发我的第一个 React 个人迷你项目。请对我宽容一点。。

在过去的一个小时里，我一直在尝试寻找基于给定 ID 更新数组中项目的最佳方法。我发现这种方法似乎是人们正在使用的方法（使用 findIndex ）。我可能搜索得不够深入，想知道是否有人可以指出或改进它？

我也见过其他方法，但我不太确定这是否是 最佳方法 ，尽管方法很多。

这是我的状态

state = {
    cards: [],
    updateId: ''
};

这是我在方法处理程序中更新它的方式

submit = e => {
    e.preventDefault();
    if (!this.state.formAddState) {
      const editCard = {
        reason: this.state.reason,
        description: this.state.description
      };
      let newCards = [...this.state.cards];
      let indexUpdate = newCards.findIndex(
        card => card.id === this.state.updateId
      );
      newCards[indexUpdate].reason = editCard.reason;
      newCards[indexUpdate].description = editCard.description;
      this.setState({
        cards: newCards
      });
      return;
    }
};

可能是重复的。。最终，我想学习！

谢谢！

Answer 1

看来你在这里太挣扎了。如果你知道卡的 id ，那么你可以映射卡，如果没有匹配，你可以返回卡本身，否则你可以用扩展语法来更新它。

submit = e => {
  e.preventDefault();
  const { cards, updateId, reason, description, formAddState } = this.state;

  if (!formAddState) {
    let newCards = cards.map(card => {
      if (card.id !== updateId) return card;
      return { ...card, reason, description };
    });
    this.setState({
      cards: newCards
    });
  }
};

正如你所见，没有 最好的方法 来做到这一点。你应该根据你的需求编写代码。你可以使用不同的方法来更新你的状态。只是， 不要直接改变你的状态，而要使用正确的工具来更新你的状态 。你应该把你的状态视为不可变的。这就是为什么我在我的例子中返回一个新数组，并通过扩展语法返回更新后的卡片。

class App extends React.Component {
  state = {
    cards: [
      { id: 1, reason: "foo", description: "foo desc" },
      { id: 2, reason: "bar", description: "bar desc" },
      { id: 3, reason: "baz", description: "baz desc" }
    ],
    updateId: 1,
    reason: "changed reason",
    description: "changed description",
    formAddState: false
  };

  submit = e => {
    e.preventDefault();
    const { cards, updateId, reason, description, formAddState } = this.state;

    if (!formAddState) {
      let newCards = cards.map(card => {
        if (card.id !== updateId) return card;
        return { ...card, reason, description };
      });
      this.setState({
        cards: newCards
      });
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.submit}>Change</button>
        {this.state.cards.map(card => (
          <div>
            <p>{card.id}</p>
            <p>{card.reason}</p>
            <p>{card.description}</p>
          </div>
        ))}
      </div>
    );
  }
}

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

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

Answer 2

假设您的状态是以下数组：

const [state, setState] = useState([{id: 1, value: 'foo'},{id:2, value:'it\'s never lupus'}])

并且您只想更新给定的 id 并替换其值：

const updater = (id, value) =>{
    const item = state.find(x => x.id === id)
    const updatedItem = {...item, value}
    const newState = [...state]
    newState.splice(state.indexOf(item),1, updatedItem)
    setState(newState)
}