Question

我想根据所选值更改更新数组的状态。因此，我在boardStatus的数组state中有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

您可以这样做：

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});
}

Answer 2

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

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

Answer 3

另一个-像这样更改状态-this.state = {activeBoard:null}和handleBoardPress就是这样-

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

Answer 4

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

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

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

它避免了Java代码中现在不再真正使用的老式for循环。

更新阵列状态

4 个答案: