Index.js 错误：UserForm(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null

Question

嗨，我对反应还很陌生。我对反应相当陌生，我正在尝试通过单击按钮在我的反应应用程序中添加一行。我关注了这个链接如何在 React.js 中动态添加和删除表格行

这样做，但我无法将其转换为我的代码。

我收到此错误。

错误：UserForm(...)：渲染没有返回任何内容。这通常意味着缺少 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

这是我的代码：

我的代码在这里：KPIDetails.js 我在这里渲染 KPI Details.js 文件中的视图。

<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>;

这是我编写所有函数的 UserFormjs 代码：

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)
    });
  };
}

这是 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();

我不明白这个错误。还有另一种方法可以做到这一点吗？实现一键创建表格行？

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>
          );
        }
      }
    }

我已经尝试过这个基本代码，这在 switch case 上运行良好。你也可以试试。看来问题出在 FormUserDetails 组件上。 你能发布代码吗？

Answer 2

删除了导致问题的构造函数并解决了问题