更新 state 中数组的状态答案

【问题标题】：Update status of array in state更新 state 中数组的状态
【发布时间】：2020-04-15 15:08:30
【问题描述】：

我想根据所选值更改更新数组的状态。所以我在state 的数组boardStatus 中有3 个元素。现在当按下第二个 TouchableOpacity (handleBoardPress(2)) 时，数组中只有第二个元素的状态，{id:2, status:true} 应该是 true，1 和 3 应该是 false。

我的代码：

class TestApp extends Component {
  constructor() {
    super()
    this.state = {
    boardStatus:[
        {id:1, status:false},
        {id:2, status:true},
        {id:3, status:true},
    ]
  };
 }

handleBoardPress=(id)=>{
    var id = id.toString();

    for(i=0, i!=id, i<=3, i++){     // How do I code this part?
        this.setState({
            boardStatus[i]: false
        })
    }   
}

render() {
return (
  <View>
    <TouchableOpacity 
        onPress={()=>this.handleBoardPress(1)}>
        <Text>One</Text>
    </TouchableOpacity>

    <TouchableOpacity 
        onPress={()=>this.handleBoardPress(2)}>
        <Text>Two</Text>
    </TouchableOpacity>

    <TouchableOpacity 
        onPress={()=>this.handleBoardPress(3)}>
        <Text>Three</Text>
    </TouchableOpacity>
  </View>
  );
 }
}

如何编码handleBoardPress 函数？

【问题讨论】：

但是当你点击 1st Touchable opacity 而不是 2nd 时，状态会发生什么？如果行为必须与第二个类似，那么下面的答案应该有效，否则，他们不会。

标签： javascript arrays reactjs react-native react-state

【解决方案1】：

您可以使用地图来执行此操作。

  handleBoardPress = id => {
    let updatedBoard = this.state.boardStatus.map(el => ({...el, status: el.id === id}));
    this.setState({ boardStatus: updatedBoard});
  };

【讨论】：

如何 setState 将boardStatus 中的所有元素标记为真？假设我想调用一个名为resetStatus 的函数。我将使用什么逻辑将boardStatus 中所有元素的状态更新为 true？
@Somename 会是这样的`this.setState({ boardStatus: this.state.boardStatus.map(el => ({...el, status: true}))})`
@Somename here 是全选并取消全选的示例。

【解决方案2】：

你可以这样做：

handleBoardPress = (id) => {
    var id = id.toString();
    var boardStatus = [];

    for (var i = 1; i <= 3; i++) {
        if (i == id) {
            boardStatus.push({id: i, status: true});
        } else {
            boardStatus.push({id: i, status: false});
        }
    }

    this.setState({boardStatus});
}

【讨论】：

虽然解决方案“有效”，但如果boardStatus 中的元素数量发生变化，使用外部迭代器可能会导致状态发生不必要的变化。我宁愿建议使用map 而不是for 循环。
是的，map 更好，但如果传入了无效的 id，它也不起作用。例如，如果他添加另一个 TouchableOpacity 而不更新状态。
@SachinGadagi 你说得对，我用的是地图，它更简单更干净。
我的意思是，只使用键是 id 而不是数组的对象会简单得多。

【解决方案3】：

另一种选择 - 像这样更改状态 - this.state = {activeBoard:null} 和 handleBoardPress 会像这样 -

handleBoardPress(boardId){
   this.setState({activeBoard:boardId})
}

【讨论】：

【解决方案4】：

或者你可以使用更多的 ES6 方法

handleBoardPress = id => {
  const { boardStatus } = this.state
  const oldStatuses = boardStatus.filter(item => item.id !== id)

  this.setState({
    boardStatus: [
      ...oldStatuses, {id, status: true}
    ]
  })
}

它避免了如今在 Javascript 代码中不再真正使用的旧经典 for 循环。

【讨论】：