获取错误类型错误：无法读取 null 的属性“行”答案

【问题标题】：Getting Error TypeError: Cannot read property 'rows' of null获取错误类型错误：无法读取 null 的属性“行”
【发布时间】：2020-09-21 10:39:33
【问题描述】：

我对 react 还很陌生，我正在尝试通过单击按钮在我的 react 应用程序中添加一行。我点击了这个链接How to add and remove table rows Dynamically in React.js

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

我的代码在这里： 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>

这是我调用所有函数的js文件

用户表单.js

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: ["row1"]
    };

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

我做错了什么。还有其他方法吗？

【问题讨论】：

你初始化你的状态对象了吗？如果不是，它将是null，直到您第一次致电setState。这个问题可能需要更多细节。
onChange={this.handleChangeRows(idx)} 似乎是错误的。你试过onChange={() => this.handleChangeRows(idx)} 吗？
另外，请花时间格式化您的代码，以便那些试图提供帮助的人可以阅读。
我使用构造函数 constructor(props) { super(props); 初始化了对象this.state = { 行：[] }; }
但是在删除构造函数时它没有给出任何呈现形式的错误，它恢复正常

标签： reactjs react-redux material-ui reactjs.net

【解决方案1】：

我已添加：

state = {
    rows: []
  };

在组件中，它解决了问题

【讨论】：