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

问题描述

我不确定如何解释我的问题，但我的 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 和 name

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

这是我选择品牌时的redux，我需要获取ID和名称

编辑：我得到这个错误没有控制台：

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

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

标签： reactjsreduxreact-reduxredux-form

正如 redux-form 的创建者 Erik R. 在这里回答的那样，您可以使用以下方法对 Select 的选项值进行字符串化JSON.stringify：

<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正确设置品牌，请务必先将其字符串化。否则，传递一个对象字面量，不会设置品牌 Select 的初始值。
您可以在组件中抽象和重用上述两个步骤，即字符串化/解析RenderSelect。以类似的方式，Erik R. 在他的ObjectSelect.js示例中实现了它。

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

问题描述

解决方案

推荐阅读