嗨,我是一个相当新的反应。我是相当新的反应,我试图添加一个行在我的反应应用程序的点击一个按钮。我按照这个链接如何添加和删除表行动态在React.js的
来做,但我无法将它翻译成我的代码。
我得到了这个错误。
错误。UserForm(...): 没有从渲染中返回任何东西。这通常意味着缺少一个返回语句。或者,如果要渲染什么都没有,就返回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();
我不明白这个错误。另外有没有其他的方法?实现创建一个表行的点击一个按钮?
我不能把它贴在评论里,所以这里是。
render() {
const { step } = this.state;
const { firstName, lastName, email, occupation, city, bio } = this.state;
const values = { firstName, lastName, email, occupation, city, bio };
switch (step) {
case 1:
return (
<FormUserDetails
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
);
case 2:
return (
<FormPersonalDetails
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
values={values}
/>
);
case 3:
return (
<Confirm
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
/>
);
case 4:
return <Success />;
}
}}
导出默认的UserForm。
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>
);
}
}
}
我试过这个基本的代码,在切换情况下可以正常工作,你也可以试试,问题似乎出在 FormUserDetails 组件.能不能把代码贴出来?
FormUserDeTails:
const useStyles = makeStyles({
root: {
width: "100%",
maxWidth: 500
}
});
export class FormUserDetails extends Component {
continue = e => {
e.preventDefault();
this.props.nextStep();
};
render() {
const { values, handleChange } = this.props;
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<div className={useStyles.root}>
<AppBar position="static">
<Toolbar>
<Typography
gutterBottom
align="center"
style={{ width: "100%", alignItems: "center" }}
>
Best Practices Management System
</Typography>
</Toolbar>
</AppBar>
</div>
<br />
<br />
<TextField
label="Title"
variant="outlined"
size="small"
placeholder="Enter the Title of the Best Practice"
onChange={handleChange("Title")}
defaultValue={values.Title}
style={{ width: "80%" }}
/>
<br />
<br />
<TextField
placeholder="Enter the details of the Best Practice"
label="Details of Best Practice"
size="small"
onChange={handleChange("Details")}
defaultValue={values.Details}
style={{ width: "80%" }}
variant="outlined"
multiline
rows={4}
rowsMax={8}
/>
<br />
<br />
<TextField
placeholder="What is the Best Practice?"
label="What is the Best Practice"
size="small"
onChange={handleChange("What")}
defaultValue={values.What}
style={{ width: "80%" }}
variant="outlined"
multiline
rows={4}
rowsMax={8}
/>
<br />
<br />
<TextField
placeholder="Why was the Best Practice Implemented"
label="Why was the Best Practice Implemented"
size="small"
onChange={handleChange("Why")}
defaultValue={values.Why}
style={{ width: "80%" }}
variant="outlined"
multiline
rows={4}
rowsMax={8}
/>
<br />
<br />
<TextField
placeholder="How was the Best Practice Implemented"
label="How was the Best Practice Implemented"
size="small"
onChange={handleChange("How")}
defaultValue={values.How}
style={{ width: "80%" }}
variant="outlined"
multiline
rows={4}
rowsMax={8}
/>
<br />
<br />
<FormControl style={{ width: "80%" }} size="small">
<InputLabel
htmlFor="Implementation Status"
style={{
marginLeft: 10,
top: "50%",
transform: "translate(0,-50%"
}}
>
Implementation Status
</InputLabel>
<Select
labelId="Implementation Status"
name="name"
onChange={handleChange("Status")}
defaultValue={values.Status}
variant="outlined"
inputProps={{
id: "Implementation Status",
name: "age"
}}
>
<MenuItem value="Implemented">Implemented</MenuItem>
<MenuItem value="Implementation in Progress">
Implementation in Progress
</MenuItem>
<MenuItem value="Not Implemented">Not Implemented</MenuItem>
</Select>
</FormControl>
<br />
<br />
<TextField
placeholder="Cost of Implementation of the Best Practice"
label="Cost of Implementation"
size="small"
onChange={handleChange("Cost")}
defaultValue={values.Cost}
style={{ width: "80%" }}
variant="outlined"
/>
<br />
<br />
<TextField
placeholder="Benefits of the Best Practice"
label="Benefits of the Best Practice"
size="small"
onChange={handleChange("Benefits")}
defaultValue={values.Benefits}
style={{ width: "80%" }}
variant="outlined"
/>
<br />
<br />
<Grid
container
direction="row"
justify="left"
alignItems="left"
style={{ width: "83%" }}
>
<Button
variant="contained"
color="primary"
style={styles.button}
onClick={this.continue}
>
Continue
</Button>
</Grid>
</React.Fragment>
</MuiThemeProvider>
);
}
}
const theme = createMuiTheme({
palette: {
primary: blue,
secondary: purple
},
status: {
danger: "orange"
}
});
const styles = {
button: {
margin: 15,
marginLeft: "12%"
}
};
export default FormUserDetails;
删除了一个导致问题的构造函数,它解决了这个问题。