【问题标题】：React native updating multiple child component statesReact Native 更新多个子组件状态
【发布时间】：2019-04-14 06:26:10
【问题描述】：

我正在将 React Native 中的扫雷应用程序作为个人项目来尝试和学习这些概念。我遇到的问题是尝试同时更新多个子对象。我不确定这是否是最佳做法。

我有 3 个组件游戏 > 网格 > 单元格。 Game 组件负责游戏的逻辑，例如计时器/获胜条件/失败条件。网格是单元格的集合，它决定了每个单元格应该是什么。

游戏组件：

render() {
    return (
        <Grid
            action={this.props.action}
            firstClick={this.state.firstClick}
        />
    );
}

我将状态 firstClick 传递给等于 true 的网格组件。这意味着当我点击第一个单元格时，我希望它显示所有周围的邻居，而第一次点击等于 true。

网格组件：

_renderItem = ({ item }) => (
    <Cell
        item={item}
        neighbours={this.state.neighbours[item.key.substring(0,1)][item.key.substring(1,2)]}
        firstClick={this.props.firstClick}
    />
);

render() {
    return (
        <FlatList
            data={this.state.flatGrid}
            renderItem={this._renderItem}
            keyExtractor={this._keyExtractor}
            numColumns={10}
        />
    );
}

网格是一个单元格的平面列表，当它被点击时，网格知道每个单元格的相邻单元格。我遇到的问题是我不确定我应该在哪里更新被点击的单元格及其相邻单元格的状态。我希望将单元格及其所有邻居的 isHidden 状态设置为 false。

应该在grid组件还是cells组件中处理？我不确定如何在不破坏封装的情况下解决这个问题。

这些是我的单元格组件中的状态

constructor(props) {
super(props);

this.state = {
  isFlagged: false,
  isHidden: true,
  value: '',
  id: ''
};

提前致谢！

【问题讨论】：

标签： react-native

【解决方案1】：

这里有一些东西可以让你的生活更轻松。

首先，您的单元格应该是PureComponent，并且您永远不应该将状态存储在您的单元格中。唯一的原因是单元格将在某个时候被重复使用，并且您的整个屏幕可能会开始随机运行。您可以将每个单元模型的状态存储在数据源中。

最后，您应该将回调函数作为props 传递给您的单元格。点击单元格后，计算Grid 组件中的相邻单元格。计算完毕后，相应地更改相应的单元模型。

示例

class Grid extends React.Component {
  state = {
    dataSource: [{
      isFlagged: false,
      isHidden: true,
      value: '1',
      id: '1',
    }, {
      isFlagged: false,
      isHidden: true,
      value: '2',
      id: '2',
    }],
  };

  onCellClicked = (item) => {
    // Find neighbouring items and replace the modified items in the state in this function
  }

  _renderItem = (item) => {
    return <Cell onClick={() => this.onCellClicked(item)} item={item}>;
  }

  render() {
    return (
      <FlatList data={this.state.dataSource} renderItem={this._renderItem}/>
    );
  }
}

【讨论】：