Redux Form：向Field Array传递函数属性时出现undefined问题

我帮你梳理几个常见的排查点和解决办法，应该能搞定这个问题：

• 确认FieldArray传递自定义props的正确姿势
  Redux-Form的FieldArray组件不会自动把父组件的props透传给子组件，你需要显式传递。如果用render函数渲染子组件，直接把函数作为props传给子组件就行：

<FieldArray
  name={`${formPrefix}.InfoPanel.periods`}
  render={({ fields }) => (
    <YourPeriodsListComponent
      fields={fields}
      removePeriodCallback={this.removePeriodCallback}
    />
  )}
/>

如果是用component属性指定子组件，要通过FieldArray的props属性来传递自定义参数：

<FieldArray
  name={`${formPrefix}.InfoPanel.periods`}
  component={YourPeriodsListComponent}
  props={{ removePeriodCallback: this.removePeriodCallback }}
/>

• 检查子组件是否正确接收props
  确保你的子组件（FieldArray渲染的组件）正确接收了removePeriodCallback。如果是函数组件，要从参数里解构出来：

const YourPeriodsListComponent = ({ fields, removePeriodCallback }) => {
  // 调用示例：removePeriodCallback(某个id)
  return (
    <div>
      {fields.map((period, index) => (
        <div key={period}>
          <button onClick={() => removePeriodCallback(index)}>删除</button>
        </div>
      ))}
    </div>
  );
};

如果是类组件，要从this.props里获取：

class YourPeriodsListComponent extends React.Component {
  handleRemove = (index) => {
    this.props.removePeriodCallback(index);
  };

  render() {
    const { fields } = this.props;
    return (
      <div>
        {fields.map((period, index) => (
          <div key={period}>
            <button onClick={() => this.handleRemove(index)}>删除</button>
          </div>
        ))}
      </div>
    );
  }
}

• 额外检查：函数内部的逻辑细节
  你在constructor里绑定this的操作是对的，这部分没问题。不过顺便提一句，你的removePeriodCallback里的filter逻辑好像有点问题？filter((e, i) => i === periodeId)会只保留索引等于periodeId的项，而不是删除该项——应该用i !== periodeId才对哦：

removePeriodCallback(periodeId) {
  const { formPrefix, periods} = this.props;
  this.props.reduxFormChange(
    `${formPrefix}.InfoPanel`,
    'periods',
    periods.filter((e, i) => i !== periodeId) // 这里改成!==
      .sort((a, b) => a.fom > b.fom),
  );
}

按照上面的步骤调整后，函数应该就能正常传递并调用了。

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