标签: react-admin

如何在提交失败的表单后显示验证消息？API请求返回HTTP 400'应用程序/问题+ json'响应,并将违规包含为具有字段路径的列表.

https://tools.ietf.org/html/rfc7807#section-3

{
   "type": "https://example.net/validation-error",
   "title": "Your request parameters didn't validate.",
   "invalid-params": [ 
      {
         "name": "age",
         "reason": "must be a positive integer"
      },
      {
         "name": "color",
         "reason": "must be 'green', 'red' or 'blue'"
      }
   ]
}

我的RA项目在本地部署时可以很好地呈现，但是，当我将构建目录复制到S3存储桶以进行部署时，它会呈现出混乱的状态。有时它可以工作，但大多数情况下它的渲染如下图所示。使用AOR在两种环境下均能正常工作。

环境

React-admin版本：2.0.3没有出现问题的最新版本（如果适用）：React版本：16.4.1浏览器：Chrome / Safari

我正在使用react-admin之前的admin-rest。我想创建一个不显示菜单侧栏的自定义页面，例如“登录”页面。我将使用此页面重置用户密码。我怎样才能做到这一点？

我正在尝试创建一个邮政编码输入，以使用React-Admin在创建表单中自动加载街道，州和城市的值。如何根据onBlur邮政编码输入的事件填充输入？我获得的最佳结果是以下情形：

我创建了一个具有4个输入的自定义组件：邮政编码（在我的国家称为CEP），街道地址，州和城市。然后，我onBlur在zip输入上添加了一个事件，并根据状态属性在输入上设置了值。这是代码

class CustomAddressInput extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      cep : '',
      address : '',
      uf : '',
      city : '',
    }
    this.setAddress = this.setAddress.bind(this);
  }
  setAddress(e){
    if(e.target.value != undefined){
      endereco(e.target.value).then((result)=>{
        this.setState({
          cep: result.cep,
          address: result.logradouro,
          uf: result.uf,
          city: result.localidade
        });
      });
    }
  }

  render() {
    const { classes } = this.props;
    return (
      <TextInput label="CEP" source="cep" onBlur={(e) => this.setAddress(e)} defaultValue={this.state.cep} />
      <TextInput label="Endereco" source="address" defaultValue={this.state.address}/>
      <SelectInput label="Estado" source="state" choices={stateList} defaultValue={this.state.uf}/>
      <TextInput label="Cidade" …

我很难在编辑表单中获取记录的“更新”值。即使我有一个链接到正确的记录源的输入也应该更新它，但我始终会获得初始记录值。

是否有其他方法来获取SimpleForm的值？

我有一个简单的编辑表格：

<Edit {...props}>
    <SimpleForm>
        <MyEditForm {...props} />
    </SimpleForm>
</Edit>

MyEditForm如下：

class MyEditForm extends React.Component {
    componentDidUpdate(prevProps, prevState, snapshot) {    
        console.log(prevProps.record.surface, this.props.record.surface); // <-- here is my problem, both values always get the initial value I had when I fetched the resource from API
    }

    render() {
        return (
            <div>
                <TextInput source="surface" />
                <!-- other fields -->
            </div>
         );
    }
}

我通常采用这种方式从其他组件获取更新后的组件数据，但是就React-admin表单而言，我无法使其正常工作。

谢谢，

尼古拉斯

我有一个过滤器组件：

export const PostsFilter = (props) => (
  <Filter {...props}>
    <TextInput label='Post ID' source='id' alwaysOn />
    <TextInput label='User ID' source='user_id' alwaysOn />
  </Filter>
);

我需要添加一个重置按钮，以清除输入值。我知道应该通过将smth分发到redux来完成。那么也许有人已经解决了这个问题？谢谢！

我正在使用react-admin并尝试创建带有自动完成字段的过滤器，该过滤器将在我键入时进行查询，并且仅在搜索条件长度大于2时才开始发送查询。

我当前shouldRenderSuggestions在AutocompleteInput字段内部使用，但这仍然会在“昵称”过滤器中发送两个带有空字符串的请求，这是代码部分：

<AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
        return val.trim().length > 2
      }}/>

发生的事情是，当我填写GET发送请求的第一个和第二个字母时，但该nickname字段中有一个空字符串，

输入的字符串例如：“ abc”：

1ST要求： http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]

第二请求： http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]

3RD要求： http://website.loc/clients?filter={"nickname":"abc"}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]

我想避免完全发送前两个请求。

组件的完整代码：

const PostPagination = props => (
  <Pagination rowsPerPageOptions={[]} {...props} />
);

const PostFilter = (props) => (
  <Filter {...props}>
    <ReferenceInput label="Client"
                    source="client_id"
                    reference="clients"
                    allowEmpty
                    filterToQuery={searchText => ({ nickname: searchText })}>
      <AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
        return val.trim().length > 2
      }}/>
    </ReferenceInput>
  </Filter>
);

const PostsList = props => { …

我有一个CheckboxGroupInput这样的字段：

   <CheckboxGroupInput source="fruits" choices={[
        { 'name': 'apples' },
        { 'name': 'pears' }
    ]} optionValue='name'/>

fruits当用户选择这两个选项时，它会为字段生成如下所示的 json ：

  'fruits': ['apples','pears']

我想在Listusing中显示它ChipField，而source我没有，因为 json 是一个纯字符串数组。

如果 json 看起来像这样，源将是“名称”fruits:[{'name':'apples'}, {'name':'pears'}]

           <ArrayField source='fruits'>
                <SingleFieldList>
                    <ChipField source='???' />  
                </SingleFieldList>
            </ArrayField>

如何使用ChipField OR显示纯字符串数组的内容，或者如何告诉CheckboxGroupInput生成对象数组而不是字符串数组？

我试图显示一个<Loading>组件，直到数据获取成功，
然后显示一个子组件。我不明白为什么状态不更新......

我该如何处理这个问题？

我正在使用react-admin，但我想这并不重要。
我有一个<Dashboard>应该传递defibs (Array)给<DefibsCard>.

当我登录时，defibs我<DefibsCard>有一个空数组。谢谢 ！

const Dashboard = () => {
  const dataProvider = useDataProvider();
  const [loading, setLoading] = useState(true);
  const [defibs, setDefibs] = useState([]);

  const fetchDefibs = () => {
    dataProvider.getList('defibrillateurs', {
      filters: {}, sort: {field: 'id', order: 'ASC'}, pagination: {page: 1, perPage: 10}
    }).then((response) => {
      setDefibs(response.defibs);
      setLoading(false);
    })
  }

  useEffect(() => {
    fetchDefibs();
    console.log(loading)
  }, [])

  const classes = useStyles(); …

当前在react-admin中编辑多对多关系的“开箱即用”方式是什么？

更具体地说，有什么方法可以通过引用的表来 SelectArrayInput 或 AutoCompleteArrayInput 吗？

我的第一个表是stream 流表

我的第二个表是subject 主题表

他们的映射表是stream_subject 映射表

我必须像这个 编辑表单一样显示我的表单

目前，我正在使用引用数组输入，但它不起作用，我当前的代码如下：

<ReferenceManyField label='Subject' reference='stream_subject' target='stream_id'>
    <ReferenceArrayInput label='Subject' reference='subject' source='subject_id'>
        <SelectArrayInput source='name'>
            <ChipField source='name' />
        </SelectArrayInput>
    </ReferenceArrayInput>
</ReferenceManyField>

有没有办法为此创建多选下拉菜单，我什至尝试使用useQueryreact-admin中的钩子，但无法取得任何进展，即使有人可以帮助我，useQuery方法可以解决我的问题。为此，我使用 hasura-graphql datprovider：https://github.com/Steams/ra-data-hasura-graphql

我的 graphql 是这样的： graphql-query