值不能以预期的对象格式设置

时间:2019-01-06 06:58:26

标签: javascript reactjs redux-form react-select

我正在使用react-select和redux形式进行自动完成。有一个名为listings_of的字段,它是我需要发布到服务器的数据数组。为此,我使用了FieldArray概念。我获得的数据不是使用react-select期望的值和标签格式,因此我必须使用getOptionLabelgetOptionValue道具。为此,我采用以下方式

const renderListingsOf = ({
  fields,
  data,
  meta: { touched, error, submitFailed }
}) => {
  return (
    <ul>
      <li>
        <button type="button" onClick={() => fields.push({})}>
          Add Member
        </button>
      </li>
      {fields.map((listing, index) => (
        <li key={index}>
          <button
            type="button"
            title="Remove Member"
            onClick={() => fields.remove(index)}
          />
          <Field
            name={`${listing}`}
            component={InputTextWithSearch}
            placeholder="Search..."
            options={(data && data.users.data) || []}
            getOptionLabel={option =>
              !isEmptyObject(option) && option.personal.first_name
            }
            getOptionValue={option => {
              if(!isEmptyObject(option)) {
                return {
                  _id       : option._id,
                  first_name: option.personal.first_name,
                  last_name : option.personal.last_name
                };
              }
            }}
          />
        </li>
      ))}
    </ul>
  );
};


<Column>
  <Query
    query={GET_USERS}
    variables={{
      param: {
        limit: 10
      }
    }}
  >
    {({ loading, data }) => {
      if(loading)return 'loading...';
      return (
        <InputFieldWrapper styling={styling} label="Listings of">
          <FieldArray
            name="general.general_information.listings_of"
            component={renderListingsOf}
            data={data}
          />
        </InputFieldWrapper>
      );
    }}
  </Query>
</Column>

data.users.data具有以下对象

[
  {
    _id: 'sdfskfjsdkjfsd',
    personal: {
      first_name: 'hello',
      last_name: 'hy'
    }
  },
  {
    _id: 'sdjfkjfdkjskfdjkfff',
    personal: {
      first_name: 'hello1',
      last_name: 'hy1'
    }
  },
]

但是在提交general.general_information.listings_of的值时,应该是如下所示的对象数组

general: {
  general_information: {
  listings_of: [
      {
        _id: 'sdfskfjsdkjfsd',
        first_name: 'hello',
        last_name: 'hy'
      }
    ]
  }
}

因此,我尝试从getOptionValue返回以下对象,但此方法不起作用

general: {
  general_information: {
  listings_of: [
      {
        _id: 'sdfskfjsdkjfsd',
        personal: {
          first_name: 'hello',
          last_name: 'hy'
        }
      }
    ]
  }
}

0 个答案:

没有答案