Reactjs 无法更改复选框

当我单击来自字段为isChecked的数组的复选框时，什么也没有发生。手柄更换（）显然不起作用。所有映射似乎都正常，因为设置为true或false的复选框最初显示正确。在我添加isChecked={network[I].isChecked}之前，没有任何字段显示为已检查。但现在我不能勾选或取消勾选。我在哪里搞砸了

App.js

import React, {Component} from 'react';
import NetworkArray from './components/NetworkArray';
import {network} from './NetworkData'
import './App.css';
import 'tachyons';

class App extends Component  {

    constructor() {
    super()
    this.state = {
    network: network,
    searchfield:'',

}
this.handleChange=this.handleChange.bind(this);

}


handleChange(id) {
  this.setState(prevState => {
    const updatedNetwork = prevState.network.map(netw => {
      if (netw.id === id) {
        netw.isChecked = !netw.isChecked
      }
      return netw
    })
    return {
      network:updatedNetwork
    }
  })
}
render() {
  const filteredNetwork = this.state.network.filter(netw => {
    return netw.lastName.toLowerCase().includes(this.state.searchfield.toLowerCase())
  })

  return (

      <div>

         <NetworkArray 
             network={filteredNetwork}
             handleChange = {this.handleChange}  />
      </div> 

    )
}

}
export default App;

import React，{Component}来自'React'；
从“./components/NetworkArray”导入NetworkArray；
从“/NetworkData”导入{network}
导入“/App.css”；
输入‘超光速子’；
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
网络:网络,，
搜索字段：“”，
}
this.handleChange=this.handleChange.bind（this）；
}
手柄更换（id）{
this.setState（prevState=>{
const updatedNetwork=prevState.network.map（netw=>{
如果（netw.id==id）{
netw.isChecked=！netw.isChecked
}
返回网络
})
返回{
网络：更新的网络
}
})
}
render（）{
const filteredNetwork=this.state.network.filter（netw=>{
返回netw.lastName.toLowerCase（）.includes（this.state.searchfield.toLowerCase（））
})
返回(
)
}
}
导出默认应用程序；

卡片组件

import React from 'react';

const Card = (props) => {

    return(
        <div className = 'bg-light-green dib br3 pa3 ma2 grow  shadow-5'>

        <div>
            <h3>{props.name}</h3>
            <p>{props.company}</p> 
            <p>{props.phone}</p>
            <p>{props.email}</p>
            <p>{props.city}</p> 

         </div>
         <div> 
            My Network
            <input className ="largeCheckbox"
                type = "checkbox"
                checked={props.isChecked}
                onChange={()=> props.handleChange(props.id)}
                    /> 
            </div> 
         </div> 

        )
}

export default Card;

从“React”导入React；
康斯特卡=（道具）=>{
返回(
{props.name}
{props.company}

{props.phone}

{props.email}

{props.city}

我的网络
props.handleChange（props.id）}
/> 
)
}
导出默认卡；

NetworkArray.js

    import Card from './Card';

    const NetworkArray = ({network,handleChange}) => {
        const cardComponent = network.map((user,i) => {
            return(
            <Card 
                key = {network[i].id}
                name = {network[i].firstName + ' ' + network[i].lastName} 
                company = {network[i].company}
                phone= {network[i].phone}
                email={network[i].email}
                city = {network[i].city}
                isChecked= {network[i].isChecked}
                handleChange={handleChange}

                />

                        )
        })
            return ( 
                    <div> 

                     {cardComponent}


                    </div> 
                )
    }

    export default NetworkArray;

从“/Card”导入卡片；
常量网络数组=（{network，handleChange}）=>{
const cardComponent=network.map（（用户，i）=>{
返回(
)
})
报税表（
{cardComponent}
)
}
导出默认网络数组；

您需要将

id

道具传递给您的

卡
组件，这样您就可以将一些东西传递给
道具。handleChange
：

<Card
  id={network[i].id}
  key={network[i].id}
  name={network[i].firstName + ' ' + network[i].lastName} 
  company={network[i].company}
  phone={network[i].phone}
  email={network[i].email}
  city={network[i].city}
  isChecked={network[i].isChecked}
  handleChange={handleChange}
/>


您在
Card
组件中调用
props.handleChange（props.id）
，但您似乎没有向
NetworkArray
中的
Card
提供
id
。不确定我将如何添加它？id是在handleChange函数中调用的。当您使用
卡时，只需添加
id={network[i].id}
作为道具，这可能会使所有这些看起来都能工作哇！谢谢好的，很酷，我会为这个问题添加一个实际的答案，如果您能将其标记为正确，我将不胜感激！