用于句柄更改而不是函数的反应道具

Question

我得到 props.handleChange 在运行以下代码时不是一个函数。 我正在尝试更新单击复选框时的状态。 复选框的字段称为 myNetwork。 我以为当作为卡组件的父级的网络阵列组件可以访问应用程序中的功能和状态时？ 但这是我的第一个 React 应用程序。 拜托，我做错了什么？

应用.JS

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

class App extends Component  {
constructor() {
super()
this.state = {
network: network,
}
this.handleChange=this.handleChange.bind(this);
}
handleChange(id) {
this.setState(prevState => {
const updatedNetwork = prevState.network.map(netw => {
if (netw.id===id) {
netw.myNetwork = !netw.myNetwork
}
return netw
})
return {
network:updatedNetwork
}
})
}
render() {
return (
<div>
<NetworkArray 
network={network}
handleChange = {this.handleChange}  />
</div>
);
}
}
export default App;

卡.js

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> 
MyNetwork
<input 
type = "checkbox"
checked={props.myNetwork}
onChange={()=> props.handleChange(props.id)}
/> 
</div> 
</div> 
)
}
export default Card;

网络阵列.js

import React, {Component} from 'react';
import Card from './Card';
const NetworkArray = ({network}) => {
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}
/>
)
})
return ( 
<div> 
{cardComponent}
</div> 
)
}
export default NetworkArray;

Answer 1

您将函数从组件App传递到NetworkArray组件，但未传递到组件Card。

const NetworkArray = ({network, handleChange}) => {
...
<Card
handleChange={handleChange}
...
/>
}