处理组件中需要文本的对象

Question

我不确定如何解释我的问题，但我的 API 发送对象中的信息：

"brand": {
    "id": 48,
    "name": "Nike"
  },

我需要编辑这个品牌，当我传递这个品牌的初始值时：

function mapStateToProps(state, props) {
  const quality = state.quality;
  const edition = state.editionBox;
  const levels = state.levels;
  const tenant = state.tenant;
  const productID = props.match.params.id;
  if (productID) {
    // eslint-disable-next-line
    return { initialValues: state.products.productList.find(product => product.id == productID), levels, quality, edition, tenant}
  } else {
    return { brands: state.brands, levels, quality, edition, tenant }
  }
}

我的组件，期望只有一个品牌名称，而不是 ID 和名称

<Field
 name="brand"
                      label="Marca"
                      component={RenderedSelect}
                      validate={[required]}>
                      {brandsList.map(brand => (
                        <MenuItem key={brand.id} value={brand.name}>
                          {brand.name}
                        </MenuItem>
                      ))}
                    </Field>

这是我的 redux，当我 select 一个品牌时，我需要获取 ID 和名称

编辑：我在没有控制台的情况下收到此错误：

EDIT2：我的 brandList 来自 redux-state 的 useSelector

const brandsList = useSelector(state => state.brands.brandList);

Answer 1

正如 redux-form 的创建者 Erik R. 回答的那样 here，您可以使用 JSON.stringify:

对 Select 的选项值进行字符串化

<Field
  name="brand"
  label="Marca"
  component={RenderedSelect}
  validate={[required]}>
  { brandsList.map(brand => (
    <MenuItem key={brand.id} value={JSON.stringify(brand)}>
      {brand.name}
    </MenuItem>
  ))}
</Field>

一些重要说明：

现在，提交表单时，您会将品牌对象字符串化，您可能需要使用 JSON.parse 将其转换回对象。
为了正确设置品牌initialValues，请务必先将其字符串化。否则，传递一个对象字面量，不会设置 brand Select.
您可以在 RenderSelect 组件中抽象和重用上述两个步骤，即 stringifying/parsing。以类似的方式，Erik R. 在他的 ObjectSelect.js example.

处理组件中需要文本的对象

Handling objects in component that expects Text

reactjs

redux

react-redux

redux-form