React native 向数组中添加复选框并删除未选中的复选框-react native

我需要做的是-在数组中添加/删除每个复选框（用户选中/取消选中）的名称并发送到服务器。我被困在下面的代码中。感谢您的帮助。谢谢

class App extends Component<Props> {
  render() {
    return (
      <View style={{ padding: 15 }}>
        {
            response.map(
              item => {
                return (
                  <CheckBoxItem label={item.name} />
                );
              }
            )
        }
       </View>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
{
response.map(
项目=>{
返回(
);
}
)
}
);
}
}

CheckBoxItem.js

class CheckBoxItem extends Component<Props> {
  state = {
    check: false,
    problemTypeArray: [],
  }

  changeArray = (label) => {
      let array = [...this.state.problemTypeArray, label];
      let index = array.indexOf(label);
      console.log('array', array);//returns array with length 1 all the time
  }

  render() {
    return (
      <View>
        <CheckBox value={this.state.check} onValueChange={(checkBoolean) => { this.setState({ check: checkBoolean }); this.changeArray(this.props.label); }} />
        <MyText>{this.props.label}</MyText>
      </View>
    );
  }
}

export default CheckBoxItem;

类CheckBoxItem扩展组件{
状态={
检查：错误，
problemTypeArray:[]，
}
changeArray=（标签）=>{
让数组=[…this.state.problemTypeArray，label]；
设index=array.indexOf（label）；
console.log（'array'，array）；//始终返回长度为1的数组
}
render（）{
返回(
{this.setState（{check:checkBoolean}）；this.changeArray（this.props.label）；}}/>
{this.props.label}
);
}
}
导出默认CheckBoxItem；

真正的诀窍是在父组件中维护所选项目的列表。每个

CheckBoxItem

都可以控制自己的状态，但每次选中/取消选中时，都需要将值传递回父组件

由于您尚未显示

复选框

组件的来源，我将向您展示如何使用

react native元素

复选框

。然后，这些原则可以应用于您自己的

复选框

这是App.js的

import CheckBoxItem from './CheckBoxItem'

export default class App extends React.Component {

  // set some initial values in state
  state = {
    response: [
      {
        name:'first'
      },
            {
        name:'second'
      },
            {
        name:'third'
      },
      {
        name:'fourth'
      },
            {
        name:'fifth'
      },
            {
        name:'sixth'
      },
    ],
    selectedBoxes: [] // this array will hold the names of the items that were selected
  }

  onUpdate = (name) => {
    this.setState(previous => {
      let selectedBoxes = previous.selectedBoxes;
      let index = selectedBoxes.indexOf(name) // check to see if the name is already stored in the array
      if (index === -1) {
        selectedBoxes.push(name) // if it isn't stored add it to the array
      } else {
        selectedBoxes.splice(index, 1) // if it is stored then remove it from the array
      }
      return { selectedBoxes }; // save the new selectedBoxes value in state
    }, () => console.log(this.state.selectedBoxes)); // check that it has been saved correctly by using the callback function of state
  }

  render() {
    const { response } = this.state;
    return (
      <View style={styles.container}>
        {
          response.map(item => <CheckBoxItem label={item.name} onUpdate={this.onUpdate.bind(this,item.name)}/>)
        }
      </View>
    );
  }
}

解释
创建
CheckBoxItem
时，会向其传递两个内容。一个是标签，第二个是
onUpdate
函数。
onUpdate
函数将
CheckBoxItem
链接回父组件，以便它可以操作父组件中的状态

onUpdate
函数获取应用此更新之前的状态值，并查看
selectedbox
数组中是否存在复选框的名称。如果它存在于
selectedbox
数组中，则会将其删除，否则会将其添加

现在，父组件中存在一个数组，您可以访问该数组，该数组包含所有已选择的项

小吃
想试试我的代码吗？我已经制作了一种零食，可以证明它是有效的

设定状态
您可能已经注意到，我正在使用
setState
执行一些不寻常的操作。通过使用状态的上一个值，然后对该值应用我的更新，我确保正确调用
setState
。我还利用了这样一个事实，即
setState
在状态更新后执行回调操作。如果你想阅读更多，这里有一些关于
setState
的好文章





真正的诀窍是在父组件中维护所选项目的列表。每个
CheckBoxItem
都可以控制自己的状态，但每次选中/取消选中时，都需要将值传递回父组件

由于您尚未显示
复选框
组件的来源，我将向您展示如何使用
react native元素
复选框
。然后，这些原则可以应用于您自己的
复选框

这是App.js的

import CheckBoxItem from './CheckBoxItem'

export default class App extends React.Component {

  // set some initial values in state
  state = {
    response: [
      {
        name:'first'
      },
            {
        name:'second'
      },
            {
        name:'third'
      },
      {
        name:'fourth'
      },
            {
        name:'fifth'
      },
            {
        name:'sixth'
      },
    ],
    selectedBoxes: [] // this array will hold the names of the items that were selected
  }

  onUpdate = (name) => {
    this.setState(previous => {
      let selectedBoxes = previous.selectedBoxes;
      let index = selectedBoxes.indexOf(name) // check to see if the name is already stored in the array
      if (index === -1) {
        selectedBoxes.push(name) // if it isn't stored add it to the array
      } else {
        selectedBoxes.splice(index, 1) // if it is stored then remove it from the array
      }
      return { selectedBoxes }; // save the new selectedBoxes value in state
    }, () => console.log(this.state.selectedBoxes)); // check that it has been saved correctly by using the callback function of state
  }

  render() {
    const { response } = this.state;
    return (
      <View style={styles.container}>
        {
          response.map(item => <CheckBoxItem label={item.name} onUpdate={this.onUpdate.bind(this,item.name)}/>)
        }
      </View>
    );
  }
}

解释
创建
CheckBoxItem
时，会向其传递两个内容。一个是标签，第二个是
onUpdate
函数。
onUpdate
函数将
CheckBoxItem
链接回父组件，以便它可以操作父组件中的状态

onUpdate
函数获取应用此更新之前的状态值，并查看
selectedbox
数组中是否存在复选框的名称。如果它存在于
selectedbox
数组中，则会将其删除，否则会将其添加

现在，父组件中存在一个数组，您可以访问该数组，该数组包含所有已选择的项

小吃
想试试我的代码吗？我已经制作了一种零食，可以证明它是有效的

设定状态
您可能已经注意到，我正在使用
setState
执行一些不寻常的操作。通过使用状态的上一个值，然后对该值应用我的更新，我确保正确调用
setState
。我还利用了这样一个事实，即
setState
在状态更新后执行回调操作。如果你想阅读更多，这里有一些关于
setState
的好文章





你能详细说明一下吗？或者在snack.expo.io上发布您的代码？您能详细说明一下吗？或者在snack.expo.io上发布您的代码？