React中父组件通过props传递函数给NumberOfEvents子组件报错如何解决

问题原因 #

1. 子组件调用updateEvents时第一个参数传入空字符串，父组件逻辑中只有值为all时才会返回全量事件，空字符串会触发过滤规则，返回空事件列表
2. 父组件updateEvents方法内错误重置了this.mounted标记为true，若组件已卸载，异步请求回调触发setState会抛出内存泄漏警告；同时事件列表未按传入的eventCount截断，数量修改不生效
3. 子组件内部状态初始值写死32，未同步父组件传入的numberOfEvents属性，会出现父子组件初始值不一致问题；输入值未转数字，可能导致后续数组截断逻辑异常
4. 若出现updateEvents is undefined报错，优先检查NumberOfEvents组件的导入路径大小写是否和实际文件名完全匹配，部分打包环境下大小写不匹配会导致props传递失效

修复代码 #

App.js 中 updateEvents 方法修改为：

updateEvents = (location, eventCount) => {
  getEvents().then((events) => {
    if (!this.mounted) return;
    const locationEvents = location === 'all' 
      ? events 
      : events.filter(event => event.location === location);
    this.setState({
      events: locationEvents.slice(0, eventCount),
      numberOfEvents: eventCount
    });
  });
};

NumberOfEvents.js 全量修改为：

import React, { Component } from 'react';

class NumberOfEvents extends Component {
  state = {
    numberOfEvents: this.props.numberOfEvents
  }

  componentDidUpdate(prevProps) {
    if (prevProps.numberOfEvents !== this.props.numberOfEvents) {
      this.setState({ numberOfEvents: this.props.numberOfEvents });
    }
  }

  handleChange = (event) => {
    const value = Number(event.target.value);
    this.setState({ numberOfEvents: value });
    this.props.updateEvents('all', value);
  }

  render() {
    return (
      <input
        type="number"
        min="1"
        className="number"
        value={this.state.numberOfEvents}
        onChange={this.handleChange}
      />
    );
  }
}

export default NumberOfEvents;

内容的提问来源于stack exchange，提问作者Emily Downey