javascript - 在 React 中通过 props 从父组件传递函数到子组件?
问题描述
我遇到了一个问题,我试图通过道具将函数(updateEvents)从我的 App.js 文件传递到 NumberOfEvents.js 文件。我将相同的功能传递给另一个组件,没有任何问题。但是,当我尝试 NumberOfEvents 文件时,我收到以下错误: 错误图片 请帮助!!!
这是家长:
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;
这是孩子:
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;
解决方案
尝试向子组件添加构造函数
constructor(props) {
super(props);
this.state = {
numberOfEvents: 32
}
}
推荐阅读
- asp.net-core-webapi - 将对象数组发送到 get 函数
- python - Python 3.7 Pycharm 社区版
- node.js - 电子 setProxy() 和 fromPartition() 不起作用
- c++ - 简单的 C++11 哈希函数无法编译
- python - 如何检查两个python队列是否相同
- sql - 在 MSACCESS 中按类别和子类别创建前 N 个列表
- python - 如何将变量从一个python脚本传递给另一个?
- swift - 领域过滤器不总是找到数据?
- java - 有没有更好的方法来声明应该在 onNext() 和 onCompleted() 中使用的对象?
- java - 如何在 jOOQ 模拟数据中返回结果列表