Question

在视图中，我将所有代码存储在数据表中，并且还使用了react redux方法，当我运行此代码时，出现如下错误：

您的render方法应该具有return语句反应/要求渲染返回

如何解决？

service.js文件

import React, { Component } from 'react';
import DataTable from 'react-redux-datatable';
import 'react-redux-datatable/dist/styles.css';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import {Link} from 'react-router-dom';
import {getServices} from '../../actions/servicesActions';
import Spinner from '../Spinner';

class Services extends Component{
    componentDidMount(){
    const api= this.props.getServices();
} 
render(){

    const services=this.props.services;

    var tableSettings = {
    tableID: 'AdvancedFeaturesTable',
    wrapperType: 'section',
    displayTitle: 'Requests Table',
    keyField: '_id',
    defaultSort: ['_id', 'desc'],
    minWidth: 880,
    useLocalStorage: true,
        tableColumns: [
            {
              title: '_id',
              key: '_id',
              width: 90,
            },
            {
              title: 'Name',
              key: 'name',
              width: 90,
            },
            {
              title: 'Description',
              key: 'description',
              width: 90,
            }, 

            {
              title: 'Status',
              key: 'status',
              width: 164,
            },
            {
              title: 'Subscription',
              key: 'subscription',
              width: 90,
            },
        ],
    };

    var DataTable = () => (
        <DataTable
          tableSettings={tableSettings}
          apiLocation={services}
        />
    )
}
};

const mapStateToProps = state => {    
    return {
        service: state.services.service
    };
};
export default connect(
    mapStateToProps,
    {
        getServices
    }
)(Services);

getservices.js

export  const getServices=() =>dispatch => {
dispatch(setLoading());
axios.get('/api/admin/services')

.then(res =>

    dispatch({ 
        type:GET_SERVICES,
        payload:res.data
    })
)

  .catch(err =>
  dispatch({
    type: GET_SERVICES,
    payload: {}
  })
)
}

错误显示

 Line 199:  Your render method should have return statement  react/require-render-return

引荐链接 https://www.npmjs.com/package/react-redux-datatable

Answer 1

错误已清除。 react中的组件必须返回一个jsx元素或一组jsx元素。

在您的服务组件中，render方法不返回任何内容

好像您希望Services组件呈现DataTable，因此在您的Services组件呈现中替换以下代码

render(){
  const tableSettings = {
      tableID: 'AdvancedFeaturesTable',
      wrapperType: 'section',
      displayTitle: 'Requests Table',
      keyField: '_id',
      defaultSort: ['_id', 'desc'],
      minWidth: 880,
     useLocalStorage: true,
     tableColumns: [
        {
          title: '_id',
          key: '_id',
          width: 90,
        },
        {
          title: 'Name',
          key: 'name',
          width: 90,
        },
        {
          title: 'Description',
          key: 'description',
          width: 90,
        }, 

        {
          title: 'Status',
          key: 'status',
          width: 164,
        },
        {
          title: 'Subscription',
          key: 'subscription',
          width: 90,
        },
    ],
};

return(
    <div><DataTable
      tableSettings={tableSettings}
      apiLocation={this.props.services}
    />
  </div>
   )}

这将解决您的问题。

使用datalisting react-redux-datatable包时出错

1 个答案: