Question

我正在使用redux形式来表示数据网格。使用

初始化redux表单

  InputForm = connect(
  state => ({
    initialValues: {
      cashAndInvestments:[
        {title:"Chequing", rate:5, amount:100},
        {title:"Savings for Taxes", rate:4, amount:1000}
      ]
    } 
  }),
  null
)(InputForm);

它对于初始化部分效果很好。然后，我使用redux表单字段数组来呈现表。

import React from 'react';
import { Field } from 'redux-form';
import { Table } from "semantic-ui-react";

const RenderAssets = ({ fields }) => (
  <Table.Body>
    {fields.map((asset, index) => (
      <Table.Row key={index}>
        <Table.Cell>
          {asset.title}
        </Table.Cell>
        <Table.Cell>
          <Field 
            name={`${asset}.rate`}
            type="tel" 
            component="input" 
          />
        </Table.Cell>
        <Table.Cell>
          <Field 
            name={`${asset}.amount`} 
            type="tel" 
            component="input" 
          />
        </Table.Cell>
      </Table.Row>
    ))} 
  </Table.Body>
);  

export default RenderAssets;

正确填写费率和金额。但是，它在Table.Cell中显示资产标题为空。我想以纯文本而不是表单字段显示资产标题。谁能帮我吗？

谢谢，彼得

Answer 1

如果要访问fieldArray之外的Field项目的值，可以在fields函数中使用第三个参数map（{{3 }}，您找到了文档）：

 {fields.map((asset, index, members) => (
    <Table.Row key={index}>
      <Table.Cell>
        {members.get(index).title} 
   ....

Redux表单字段数组无法显示纯文本值

1 个答案: