Question

我正在做我的第一个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

让我们假设您的状态为以下数组：

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)
}

Answer 2

看来您在那儿太挣扎了。如果知道卡的id，则可以映射卡，如果不匹配，则可以退还卡本身，否则可以用spread syntax对其进行更新。

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" />

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

2 个答案: