Javascript 使用字符串/数字数组响应管理员数组输入

示例包括具有对象数组的情况：

  backlinks: [
        {
            date: '2012-08-10T00:00:00.000Z',
            url: 'http://example.com/foo/bar.html',
        },
        {
            date: '2012-08-14T00:00:00.000Z',
            url: 'https://blog.johndoe.com/2012/08/12/foobar.html',
        }
   ]

有没有可能让它只处理一个字符串数组

backlinks: ['a', 'b', 'c']

---

通过不为内部

TextField

提供源属性，并在实际

ArrayField

中查找数组，我能够执行inputs变量，而不是fields变量。当然，只需使用

SimpleFormIterator

。显然，React更倾向于使用键，将数组类型视为贴图

<ArrayInput source="my-source">
  <SimpleFormIterator>
    <TextInput />
  </SimpleFormIterator>
</ArrayInput>

---

也许您可以创建自己的字段组件，它可以将源代码和记录作为道具

 function populateList(numbers) {
        return numbers.map((number) =>
            <li key={number.toString()}>
                {number}
            </li>
        );
    }

    const SimpleArray = ({source, record = {}}) =>
        <ul>
            {
                populateList(record[source])
            }
        </ul>;


    SimpleArray.defaultProps = {
        addLabel: true,
        label: 'List'
     };


    SimpleArray.propTypes = {
        label: PropTypes.string,
        record: PropTypes.object,
        source: PropTypes.string
    };

    export default SimpleArray;

函数populateList（数字）{
返回编号。映射（（编号）=>

{number}

);
}
常量SimpleArray=（{source，record={}}）=>

{
populateList（记录[来源]）
}
；
SimpleArray.defaultProps={
addLabel:是的，
标签：“列表”
};
SimpleArray.propTypes={
标签：PropTypes.string，
记录：PropTypes.object，
来源：PropTypes.string
};
导出默认SimpleRay；

并可在任何表单元素中轻松使用，如：

  <SimpleShowLayout>
                        <TextField source="id"/>
                        <TextField label="Title" source="title" className={classes.name}/> 
                        <TextField source="title"/>
                        <NumberField source="defaultItemCount"/>
                        <RichTextField source="description"/>
                        <NumberField source="priceInNumber"/>
                        <SimpleArray source="attributeArray" label="Product Attributes" />




                    </SimpleShowLayout>

---

这是我的工作代码，基于@fzaninotto在react admin问题中的帖子：

import Chip from '@material-ui/core/Chip'

const TextArrayField = ({ record, source }) => {
  const array = record[source]
  if (typeof array === 'undefined' || array === null || array.length === 0) {
    return <div/>
  } else {
    return (
      <>
        {array.map(item => <Chip label={item} key={item}/>)}
      </>
    )    
  }
}
TextArrayField.defaultProps = { addLabel: true }

从'@material ui/core/Chip'导入芯片
const TextArrayField=（{记录，源}）=>{
常量数组=记录[源]
if（typeof array=='undefined'| | array===null | | | array.length==0）{
返回
}否则{
返回(
{array.map（item=>）}
)    
}
}
TextArrayField.defaultProps={addLabel:true}

用法：

  <TextArrayField source="tags">
    <SingleFieldList>
      <ChipField source="id" />
    </SingleFieldList>
  </TextArrayField>

您是否尝试过并出现错误？是的。问题是，我不知道在“source”属性的内部字段中放置什么。对于对象及其

，您可能需要创建一个替代ArrayInput。从副本开始并进行修改。仔细看一下来源。还请注意使用了redux的FieldArray。@yBrodsky您有什么想法吗？你介意和我分享吗？我正在寻找完全相同的东西，我有一个简单的电子邮件（字符串），我希望能够很好地编辑，添加或删除平面数组。干杯@不，我失败得很惨。尝试使用redux表单创建我自己的组件（使用二十一点和胡克），但无法完成。我对这件事没有太多经验。因此，我最终使用了Works fine，并实现了我的预期目标，它向您显示了相关的模型数据。我尝试使用此解决方案，但出现了类似“失败的道具类型：无效道具

值
提供给
文本字段
”@Aswathy-您解决了吗？我遇到了另一个错误：
错误：无法在对象上设置数字属性
，尽管我的数组包含诸如“@AswathyBalan@Hola Use empy string for source”之类的URL。值得注意的是，这对ArrayField失败，但由于某些原因对ArrayInput有效