javascript - 如何更新一个复杂的数组？

Question

我在状态中有这个结构

allVotes: [
  {
    id: "vote_1",
    title: "How is your day?",
    description: "Tell me: how has your day been so far?",
    choices: [
      { id: "choice_1", title: "Good", count: 7 },
      { id: "choice_2", title: "Bad", count: 12 },
      { id: "choice_3", title: "Not sure yet", count: 1 },
    ],
  },
  {
    id: "vote_2",
    title: "Programming languages",
    description: "What is your preferred language?",
    choices: [
      { id: "choice_1", title: "JavaScript", count: 5 },
      { id: "choice_2", title: "Java", count: 9 },
      { id: "choice_3", title: "Plain english", count: 17 },
    ],
  },
],

并且需要更新计数。这有效(在 Controller 组件中)

registerVote(vote, choice) {
  this.setState(prevState => {
    return {
      allVotes: prevState.allVotes.map(
        pVote =>
          pVote.id !== vote.id
            ? pVote
            : {
                ...pVote,
                choices: pVote.choices.map(
                  pChoice =>
                    pChoice.id !== choice.id
                      ? pChoice
                      : {
                          ...pChoice,
                          count: pChoice.count + 1,
                        },
                ),
              },
      ),
    };
  });
}

但是看起来很复杂，我不太确定如果这是正确的方法。有更好的方法吗？

Answer 1

您可以将组件分解成更小的组件。说:形式，投票，投票。

class Vote extends React.Component {
    increment = () => {
        this.setState(prevState => ({
            count: prevState.count + 1
        }), this.onItemChange);
    }

    onItemChange = () => {
        this.props.onItemChange(this.state, this.props.id);
    }
}


class Votes extends React.Component {
    onItemChangedCallback = (itemToUpdate, idToUpdate) => {
        this.setState(prevState => ({
            allVotes: prevState.allVotes.map(vote => vote.id === idToUpdate? {...itemToUpdate}: vote; )
        }), this.onVotesChangeCallback);
    }

    onVotesChangeCallback = () => {
        this.props.onVotesChange(this.state.allVotes)
    }

    render() {
        return (<div>this.state.allVotes.map(vote => <Vote id={vote.id} key={vote.id} vote={vote} onItemChange={this.onItemChangedCallback} />)</div>);
    }
}

除此之外，这意味着更多的类/组件符合“单一责任”原则:因此 Votes 处理列表内的移动元素、删除和添加新的但不是时间戳值、选民数量或选民列表。 Vote 处理单个项目。等等。更好地测试、更容易阅读、更容易在不同的上下文中重用。

[UPD] 经过更多思考后，我认为最好将唯一 ID 从 Votes 传递到 Vote 而不是位置索引(以及 key Prop 建议)。然后使用它 id 来确定应该替换哪个集合的元素。相应地更新了代码片段。

[UPD2] 我想 Vote 可以是函数式/无状态组件，但我最好让它基于类，以便让想法更容易理解