在 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

你可以这样做：

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

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

在 state 中更新数组的状态

Update status of array in state

javascript

arrays

reactjs

react-native

react-state