在 React 中通过 function 从父组件传递到子组件？

Question

I am having an issue where I'm trying to pass a function(updateEvents) via props from my App.js file to a NumberOfEvents.js file. I passed the same function to another component with no issues. However, when I try on the NumberOfEvents file, I get the following error: Error image Please help!!!

Here is the Parent:

 import React, { Component } from 'react'; import EventList from './EventList'; import CitySearch from './CitySearch'; import NumberOfEvents from './NumberOfEvents'; import { extractLocations, getEvents } from './api'; import './nprogress.css'; import './App.css'; class App extends Component { state = { events: [], locations: [], numberOfEvents: 32 } componentDidMount() { this.mounted = true; getEvents().then((events) => { if (this.mounted) { this.setState({ events: events.slice(0, this.state.numberOfEvents), locations: extractLocations(events) }); } }); } componentWillUnmount() { this.mounted = false; } updateEvents = (location, eventCount) => { this.mounted = true; getEvents().then((events) => { const locationEvents = (location === 'all')? events: events.filter((event) => event.location === location); this.setState({ events: locationEvents, numberOfEvents: eventCount, }); }); }; render() { return ( <div className="App"> <CitySearch locations={this.state.locations} updateEvents={this.updateEvents} /> <EventList events={this.state.events} /> <NumberOfEvents numberOfEvents={this.state.numberOfEvents} updateEvents={this.updateEvents} /> </div> ); } } export default App;

And here is the Child:

 import React, { Component } from 'react'; class NumberOfEvents extends Component { state = { numberOfEvents: 32 } handleChange = (event) => { const value = event.target.value; this.setState({ numberOfEvents: value, }); this.props.updateEvents('', value); }; render() { return ( <input className="number" value={this.state.numberOfEvents} onChange={this.handleChange} /> ) } } export default NumberOfEvents;

Answer 1

try adding a constructor to the child component

constructor(props) {
    super(props);
    this.state = {
        numberOfEvents: 32   
    }
}

Answer 2

Im not sure this will help...In Your Parent Component, inside return statement when passing the updateEvents Prop, try passing it as arrow function like this....

updateEvents={ () => this.updateEvents() } />