用于处理更改的 React Props 不是函数答案

【问题标题】：React Props for Handle Change not a Function用于处理更改的 React Props 不是函数
【发布时间】：2019-10-18 01:30:43
【问题描述】：

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

App.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;

NetworkArray.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;

【问题讨论】：

标签： javascript arrays reactjs function react-props

【解决方案1】：

您将函数从App 组件传递给NetworkArray 组件，但没有传递给Card 组件。

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

【讨论】：

谢谢！我也不确定是否应该尝试使用 this.state.network.map 而不仅仅是 network.map 进行映射？我不确定这是否是更新状态的正确方法。但后来我得到“无法读取未定义的属性状态”。但是您回答了最初的问题，只是不想再次发布所有代码。再次感谢先生。
你不能从另一个组件自动访问App组件的状态组件。您可以通过 props 传递它，这就是 this.state.network 在另一个组件中未定义的原因。
Artur，我在 NetworkArray 组件中添加了 isChecked= {network[i].isChecked}，所以我可以看到被选中的框。当我尝试更改复选框时，单击它们时没有任何反应。
if (netw.id===id) { netw.myNetwork = !netw.myNetwork } 看来您使用的密钥是myNetwork，而不是isChecked？