通过 props 从 Parent 传递函数到 React 中的 Child 组件？

Question

我遇到一个问题，我试图通过 props 从我的 App.js 文件向 NumberOfEvents.js 文件传递一个函数（updateEvents）。我将相同的功能毫无问题地传递给了另一个组件。但是，当我尝试 NumberOfEvents 文件时，出现以下错误： Error image 请帮忙！！！

这里是 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;

这里是 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

尝试向子组件添加构造函数

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

Answer 2

我不确定这是否有帮助...在您的父组件中，在传递 updateEvents Prop 时在 return 语句中，尝试像这样将其作为箭头函数传递....

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

通过 props 从 Parent 传递函数到 React 中的 Child 组件？

Passing function via props from Parent to Child component in React?

javascript

components

class

reactjs