Index.js 错误：UserForm(…)：没有从渲染返回。 这通常意味着缺少 return 语句。 或者，什么也不渲染，返回 null

Question

Hi I am fairly new to react. I am fairly new to react and I am trying add a row in my react app on the click of a button. I followed this link How to add and remove table rows Dynamically in React.js

to do so but I am not able to translate it to my code.

I am getting this error.

Error: UserForm(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Module../src/index.js
D:/react_bpms1/src/index.js:7
   4 | import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,
View compiled
__webpack_require__
D:/react_bpms1/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
D:/react_bpms1/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:2076:18
__webpack_require__
D:/react_bpms1/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
D:/react_bpms1/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
D:/react_bpms1/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:75

Here is my code:

My code here: KPIDetails.js Here I am rendering the view in KPI Details.js file.

<MuiThemeProvider>
  <React.Fragment>
    <Grid container>
      <Grid item xs={6} direction="row" alignItems="center">
        <table className="table table-bordered table-hover" id="tab_logic">
          <thead>
            <tr>
              <th className="text-center"> KPI</th>
              <th className="text-center"> UOM</th>
              <th className="text-center"> Base</th>
              <th className="text-center"> Target</th>
              <th className="text-center"> Target Date</th>
            </tr>
          </thead>
          <tbody>
            {this.state.rows.map((item, idx) => (
              <tr id="addr0" key={idx}>
                <td>{idx}</td>
                <td>
                  <input
                    type="text"
                    name="Kpi_Before"
                    value={this.state.rows[idx].Kpi_Before}
                    onChange={this.handleChangeRows(idx)}
                    className="form-control"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    name="UOM_Before"
                    value={this.state.rows[idx].UOM_Before}
                    onChange={this.handleChangeRows(idx)}
                    className="form-control"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    name="Base_Before"
                    value={this.state.rows[idx].Base_Before}
                    onChange={this.handleChangeRows(idx)}
                    className="form-control"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    name="Target_Before"
                    value={this.state.rows[idx].Target_Before}
                    onChange={this.handleChangeRows(idx)}
                    className="form-control"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    name="Target_Before"
                    value={this.state.rows[idx].dateTime}
                    onChange={this.handleChangeRows(idx)}
                    className="form-control"
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <button
          onClick={this.handleRemoveRow}
          className="pull-right btn btn-default"
        >
          Delete Row
        </button>
        <Button
          variant="outlined"
          color="primary"
          onClick={this.handleAddRow}
          size="small"
          style={styles.button}
        >
          +
        </Button>
      </Grid>
    </Grid>
  </React.Fragment>
</MuiThemeProvider>;

Here is my code for UserFormjs where I write all the functions:

export class UserForm extends Component {
  state = {
    step: 1,
    Title: "",
    Details: "",
    What: "",
    Why: "",
    How: "",
    Status: "",
    Cost: "",
    Benefits: "",
    Kpi_Before: "",
    Kpi_After: "",
    Time: "",
    UOM_Before: "",
    Base_Before: "",
    Target_Before: "",
    dateTime: null,
    rows: []
  };

  //1
  handleChangeRows = idx => e => {
    const { Kpi_Before, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = {
      [Kpi_Before]: value
    };
    this.setState({
      rows
    });
  };

  //2
  handleAddRow = () => {
    const item = {
      KPI_Before: "",
      UOM_Before: "",
      Base_Before: "",
      Target_Before: "",
      dateTime: ""
    };
    this.setState({
      rows: [...this.state.rows, item]
    });
  };

  //3
  handleRemoveRow = () => {
    this.setState({
      rows: this.state.rows.slice(0, -1)
    });
  };
}

This is index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

serviceWorker.unregister();

I don't understand this error. Also is there another way to do this? Achieve creating a table row on the click of a button?

Answer 1

      class UserForm extends React.Component {
        state = {
        step: 1
        }
      render() {
        const { step } = this.state;
        switch (step) {
        case 1:
          return (
           <h1>Step: case1</h1>
          );
        case 2:
          return (
            <h1>step: case2</h1>
          );
        }
      }
    }

I have tried this basic code, this is working fine with switch case. you can also try.It seems that problem is with FormUserDetails component. Can you post code for that?

Answer 2

Removed a constructor which was causing the problem and it solved the issue