Javascript 一个复选框影响其他复选框的状态

我有这个问题-我有多个复选框作为我的自定义组件（TimeButtonCheck）在父屏幕上呈现的一部分。在父屏幕上有一个数组，其中填充了-无论复选框是否选中。但有一个问题正在发生。如果我选中/取消选中其中一个复选框，则所有复选框都将取消选中，因为它们在父组件中具有相同的状态。当我将状态拆分为这些子组件时，我无法从子组件修改父组件的数组。有人能帮我解决这个问题吗？以下是我的代码（子元素）：

const TimeButtonCheck=props=>{
const[ceknute，setCeknute]=useState（true）；
const[pole，setPole]=使用状态（[“9:00”，“10:00”，“11:00]）；
常量checkHandler=（id）=>{
setCeknute（！ceknute）；
如果（！ceknute）{
const novePole=pole.slice（）；
novePole.push（id）；
控制台日志（“pushuj”）；
setPole（novePole）；
console.log（novelope）；
}
其他的
{
控制台日志（“filtruj”）；
}
};
返回(
{checkHandler（键）}
checkedColor={Colors.primaryColor}
containerStyle={{padding:0，}}
/>
{props.cas}
);

这是我的父组件，它映射屏幕上的时间按钮：

const JazdyInstruktor = props => {
    const pole = ["8:00", "9:00", "10:00"];
  const selectedStartDate = null;
  const [isLoading, setIsLoading] = useState(true);
  const [displayText, setDisplayText] = useState(true);
  const dataToMap = ["11:00", "12:00", "13:00", "14:00", "15:00"];


 const maper = (data) => {
    return(
      <View style = {{marginHorizontal: 18,}}>
      <View style ={styles.instruktor}>
      <InstruktorBar />
      </View>
      <View style = {styles.screen}>
      {data.map((item) => {
        return ( 
        <TimeButtonCheck
         key = {item}
         cas={item}
         />
   )})}
      </View>
      </View>
    );
  }

  const startDate = selectedStartDate ? selectedStartDate.toString() : '';
  const token = useSelector(state => state.auth.token);

    return(
    <View style={styles.container}>
    <CalendarPicker 
    onDateChange={dateChangeHandler}
    />
    <View>
    {(isLoading) ? ((displayText) ? (<View style={styles.centered}><Text>Pre zobrazenie volnych terminov si vyberte datum</Text></View>) : (<View style = {{paddingTop: 10,
      textAlign: 'center',}}><ActivityIndicator size='large' color={Colors.primaryColor}/></View>)) : **maper(dataToMap)**}
    </View>

    </View>

const JazdyInstruktor=props=>{
恒极=[“8:00”、“9:00”、“10:00”]；
const selectedStartDate=null；
const[isLoading，setIsLoading]=useState（true）；
const[displayText，setDisplayText]=useState（true）；
常量数据映射=[“11:00”、“12:00”、“13:00”、“14:00”、“15:00”]；
常量映射器=（数据）=>{
返回(
{data.map（（项）=>{
报税表（
)})}
);
}
const startDate=selectedStartDate？selectedStartDate.toString（）：“”；
const token=useSelector（state=>state.auth.token）；
返回(
{（isLoading）？（（displayText）？（前巴西沃尼奇终点站si vyberte数据）：（）：**映射器（数据映射）**}

---

在这种情况下，我无法通过这些子组件修改名为pole的父数组-我只能为每个子组件修改单独的数组。有没有办法解决此问题？谢谢。

在父组件中保存状态，复选框组件仅显示数据

function CheckBox({ value, label, isChecked }) {
  return (
    <label>
      <input type="checkbox" checked={isChecked} value={value} />
      <span>{label}</span>
    </label>
  );
}

function Parent() {
  // list of checkbox, `value` should be the format we want to save, label is something we want to display to the users
  const list = [
    { value: "1100", label: "11:00" },
    { value: "1200", label: "12:00" },
    { value: "1300", label: "13:00" }
  ];
  // every item default is un-checked
  const [data, setData] = useState(() =>
    list.map(item => ({
      ...item,
      isChecked: false
    }))
  );

  // update the check status in the parent component
  function handleToggleCheckbox(value) {
    setData(list =>
      list.map(item => {
        if (item.value === value) {
          return {
            ...item,
            isChecked: !item.isChecked
          };
        }
        return item;
      })
    );
  }

  return (
    <div className="App">
      {data.map(({ value, label, isChecked }) => (
        <CheckBox
          key={value}
          checked={isChecked}
          value={value}
          label={label}
          onClick={() => handleToggleCheckbox(value)}
        />
      ))}
    </div>
  );
}

函数复选框（{value，label，isChecked}）{
返回(
{label}
);
}
函数父函数（）{
//复选框列表，`value`应该是我们想要保存的格式，标签是我们想要向用户显示的内容
常数列表=[
{值：“1100”，标签：“11:00”}，
{值：“1200”，标签：“12:00”}，
{值：“1300”，标签：“13:00”}
];
//每个默认项都未选中
const[data，setData]=useState（（）=>
list.map（项=>({
…项目，
被检查：错误
}))
);
//更新父零部件中的检查状态
函数handleToggleCheckbox（值）{
设置数据（列表=>
list.map（项=>{
如果（item.value==值）{
返回{
…项目，
已检查：！item.isChecked
};
}
退货项目；
})
);
}
返回(
{data.map（{value，label，isChecked}）=>(
handleToggleCheckbox（值）}
/>
))}
);
}

---

@

“提升状态”（检查文档）-管理父级中的状态，传递数据并更改处理程序（作为道具）对child-react basic

我不能从子组件修改父组件的数组

是的，你可以，通过传递一个父函数作为道具来更新数组，并从子组件内部调用它。非常感谢你，这真的很有帮助，很有用！尝试使用

isChecked

属性来筛选你想要的项

const checkedItems=data.filter（{isChecked}）=>isChecked）

function CheckBox({ value, label, isChecked }) {
  return (
    <label>
      <input type="checkbox" checked={isChecked} value={value} />
      <span>{label}</span>
    </label>
  );
}

function Parent() {
  // list of checkbox, `value` should be the format we want to save, label is something we want to display to the users
  const list = [
    { value: "1100", label: "11:00" },
    { value: "1200", label: "12:00" },
    { value: "1300", label: "13:00" }
  ];
  // every item default is un-checked
  const [data, setData] = useState(() =>
    list.map(item => ({
      ...item,
      isChecked: false
    }))
  );

  // update the check status in the parent component
  function handleToggleCheckbox(value) {
    setData(list =>
      list.map(item => {
        if (item.value === value) {
          return {
            ...item,
            isChecked: !item.isChecked
          };
        }
        return item;
      })
    );
  }

  return (
    <div className="App">
      {data.map(({ value, label, isChecked }) => (
        <CheckBox
          key={value}
          checked={isChecked}
          value={value}
          label={label}
          onClick={() => handleToggleCheckbox(value)}
        />
      ))}
    </div>
  );
}