javascript - 在 state 中更新数组的状态

Question

我想根据所选值更改更新数组的状态。所以我在 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 函数？

Answer 1

您可以使用 map 来做到这一点。

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