Question

我有一个<PARENT>组件，状态名为map：

constructor() {
  super();
  this.state = {
    map: {
      group1: [],
    },
  };
}

在componentWillMount中，setState为group1提供了一系列元素。然后在<CHILD>组件的渲染中，我渲染group1元素数组。

我是这样做的，因为我想让数组不会将每次小更新重新渲染到父状态。

数组中的每个元素都是可点击的。单击时，它会更新父状态并仅重新渲染单击的元素。

export const handleClickRank = (options, i, group, rank, preset) => {
  component = options.component;
  const newState = update(component.state, { range: { current: { ranks: { [rank]: { $set: preset } } } },
                                             map: { [group]: { [i]: { 0: { props: { toggled: { $set: preset } } } } } } });
  component.setState(newState);
};

更新range current需要上面的ranks州。我以为我可以把它留在那里，并以某种方式神奇地更新点击的元素。或者至少更新整个阵列。但它并没有做我理解的事情。我考虑过添加shouldComponentUpdate，但我读到这可能会很快变得一团糟，如果可能的话会避免。所以我添加了第二次更新到状态（<PARENT>），这是update(component.state, { map: { [group]: { [i]: { 0: { props: { toggled: { $set: preset } } } } } } });部分。

setState在<PARENT> map州的props状态，找到所点击的索引，并将toggled的{{1}}更改为ActiveX新的价值。现在它只更新被点击的元素。它完全按我想要的方式完成。

（这是我的问题）我读到更新道具是一种反模式，应该避免。但是，我认为我在这里做的是从父母到孩子发送不同的道具，所以我不会看到它的伤害。我想错了我错了吗？

从父

0 个答案: