Реагировать реквизит для смены дескриптора не функция - PullRequest
Новая
       14

Реагировать реквизит для смены дескриптора не функция

0 голосов
/ 18 октября 2019

Я получаю props.handleChange не является функцией при запуске следующего кода. Я пытаюсь обновить состояние, когда установлен флажок. Поле, которое является флажком, называется myNetwork. Я думал, что когда компонент NetworkArray, который является родителем компонента Card, будет иметь доступ к функциям и состоянию в приложении? Но это мое первое приложение 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;

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

1 Ответ

3 голосов
/ 18 октября 2019

Вы передали функцию из компонента App в компонент NetworkArray, но не в компонент Card. 

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