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

【问题标题】：Handling objects in component that expects Text处理组件中需要文本的对象
【发布时间】：2020-06-25 18:37:42
【问题描述】：

我不确定如何解释我的问题，但我的 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，我需要获取ID和名称

编辑：我在没有控制台时收到此错误：

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

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

【问题讨论】：

你从组件内部从哪里获得brandList？它是从 redux 状态作为道具来的吗？
@Hyetigran 求解答！我使用 useSelector 得到了这个。
明白了！您似乎想访问菜单项中每个品牌的 id 和 name 属性，但无法访问。对吗？
@Hyetigran 是的，FieldArray 通过 Redux-form 文档执行此操作。但我希望在提交时，值会发送 ID 和名称，而不仅仅是名称。我相信这两个问题是有联系的。

标签： reactjs redux react-redux redux-form

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

【讨论】：

我不太明白。当我有一个看起来像这样的字符串时，我应该对 InitialValues 进行什么更改？ initialValues: state.products.productList.find(product => product.id == productID
查看您的用例，您可能不会更改您的initialValues。但是如果你想为特定品牌设置一个初始值，你应该设置如下：initialValues: { brand: JSON.stringify({ id: 48, name: "Nike" }) }.
好的，在 initialValues 上使用它，我需要对所有字段都使用它吗？ return { initialValues: { id: obj.id, name: obj.name, brand: JSON.stringify(obj.brand), }}
对不起，我不明白你的问题。你能详细说明一下吗？
是的，它正在工作，我很抱歉。感谢您的回答！