Javascript Redux form-将函数作为属性传递给字段数组会导致未定义

我试图将函数作为属性从父组件传递给子redux form fieldArray组件。这是具有以下功能的容器组件：

  constructor(props) {
    super(props);
    this.removePeriodCallback = this.removePeriodCallback.bind(this);
  }

  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),
    );
  }

我将它传递给一个子组件，如下所示：

 <FieldArray
      name="periods"
      component={Periods}
      props={{ removePeriodCallback: this.removePeriodCallback }}
    />

 export const Periods= ({ fields }) => (
  <div>
    {fields.map((fieldId, index) => {
      const toDate = fields.get(index).tom;
      const fromDate = fields.get(index).fom;
      const removePeriodCallback = this.props.removePeriodCallback;   

      return (
        <Row key={fieldId}>
          <Column>
            <div>
              <UttakPeriodeType
                toDate ={toDate }
                fromDate ={fromDate }
                removePeriodCallback={removePeriodCallback}
              />

I have also tried to deconstruct it inside arguments of the component:

    export const Periods= ({ fields, removePeriodCallback }) => (
  <div>
    {fields.map((fieldId, index) => {
      const toDate = fields.get(index).tom;
      const fromDate = fields.get(index).fom;

      return (
        <Row key={fieldId}>
          <Column>
            <div>
              <UttakPeriodeType
                toDate ={toDate }
                fromDate ={fromDate }
                removePeriodCallback={removePeriodCallback}
              />

在子组件中，我尝试访问如下函数：

 <FieldArray
      name="periods"
      component={Periods}
      props={{ removePeriodCallback: this.removePeriodCallback }}
    />

 export const Periods= ({ fields }) => (
  <div>
    {fields.map((fieldId, index) => {
      const toDate = fields.get(index).tom;
      const fromDate = fields.get(index).fom;
      const removePeriodCallback = this.props.removePeriodCallback;   

      return (
        <Row key={fieldId}>
          <Column>
            <div>
              <UttakPeriodeType
                toDate ={toDate }
                fromDate ={fromDate }
                removePeriodCallback={removePeriodCallback}
              />

I have also tried to deconstruct it inside arguments of the component:

    export const Periods= ({ fields, removePeriodCallback }) => (
  <div>
    {fields.map((fieldId, index) => {
      const toDate = fields.get(index).tom;
      const fromDate = fields.get(index).fom;

      return (
        <Row key={fieldId}>
          <Column>
            <div>
              <UttakPeriodeType
                toDate ={toDate }
                fromDate ={fromDate }
                removePeriodCallback={removePeriodCallback}
              />

export const Periods=（{fields}）=>(
{fields.map（（fieldId，index）=>{
const toDate=fields.get（index.tom）；
const fromDate=fields.get（index）.fom；
const removePeriodCallback=this.props.removePeriodCallback；
返回(
我还尝试在组件的参数中解构它：
导出常量周期=（{fields，removePeriodCallback}）=>(
{fields.map（（fieldId，index）=>{
const toDate=fields.get（index.tom）；
const fromDate=fields.get（index）.fom；
返回(

但是，当我尝试使用

removePeriodCallback

---

我做错了什么，我应该如何解决这个问题？

你的解构方法是正确的。我尝试了redux表单示例，下面代码中的somefunction成功，函数通过了

<FieldArray name="members" component={renderMembers} props={{ someFunction }}/>

---

const renderMembers=（{fields，someFunction}）=>(
{fields.map（（成员，索引）=>(

someFunction（）}
/>

---

您必须检查要向其传递函数的uttakPeriodType组件。

解构方法就是要走的路。我尝试了redux表单示例，下面代码中的somefunction起作用，函数被传递了

<FieldArray name="members" component={renderMembers} props={{ someFunction }}/>

---

const renderMembers=（{fields，someFunction}）=>(
{fields.map（（成员，索引）=>(

someFunction（）}
/>

---

您必须检查要向其传递函数的uttakPeriodType组件。

然后我得到

TypeError:无法读取未定义的属性“removePeriodCallback”

然后我得到

TypeError:无法读取未定义的属性“removePeriodCallback”