Question

我决定学习一些反应和弹簧启动。我按照本教程链接：https://stormpath.com/blog/crud-application-react-spring-boot-user-authentication

我能够在教程之后使应用程序正常工作，但我重申它已经过时了，现在我认为创建类的首选方法是组件而不是使用createclass（）。所以我试图改变它以使用insted组件。

我在EmployeeTable类/ compnent上收到此警告：数组或迭代器中的每个子节点都应该具有唯一的“键”支柱。检查EmployeeTable的呈现方法。

这是我的EmployeeTable在将其更改为组件后的样子。我不知道如何将键添加到组件中，或者我还需要在员工内部添加密钥。帮助理解如何将此createclass函数更改为组件将有助于我了解有关react.js的更多信息。

如果您需要更多信息，请告诉我们！以下是我的js文件：

class Employee extends React.Component{
    constructor(props){
        super(props);
        this.state.display = true;
    }

    handleDelete() {
        var self = this;
        $.ajax({
            url: self.props.employee._links.self.href,
            type: 'DELETE',
            success: function(result) {
                self.setState({display: false});
            },
            error: function(xhr, ajaxOptions, thrownError) {
                toastr.error(xhr.responseJSON.message);
            }
        });
    }

    render() {
        if (this.state.display==false){
            return null;
        }
        else{
            return (
                <tr key={this.props.employee.Gmid.toString()}>
                    <td>{this.props.employee.Gmid}</td>
                    <td>{this.props.employee.name}</td>
                    <td>{this.props.employee.age}</td>
                    <td>{this.props.employee.years}</td>
                    <td>
                        <button className="btn btn-info" onClick={this.handleDelete}>Delete</button>
                    </td>
                </tr>)
        }

    }
}

class EmployeeTable extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        var rows = [];
        this.props.employees.forEach(function (employee) {
            rows.push(React.createElement(Employee, { employee: employee }));
        });
        return (
            <div className="container">
                <table className="table table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Gmid</th>
                        <th>Age</th>
                        <th>Years</th>
                    </tr>
                </thead>
                <tbody>{rows}</tbody>
                </table>
            </div>)
    }
}

var addNewUserButton = <button class="btn btn-default" onClick="showNewUserCreatinonForm"> Add New User </button>

function AddUserButton(props){
    return(
        <button class="btn btn-default" onClick="showNewUserCreatinonForm"> Add New User </button>
)
}

class App extends React.Component {
    constructor(props) {
        super(props);
       this.state = { employees: []};
    }

    loadEmployeesFromServer() {
        var self = this;
        var host = window.location.hostname;
        var urlHost = "";
        if(host == "localhost"){
            urlHost="http://localhost:8008/davidsAwesomeReactApplication/api/employees"
        }
        else{
            urlHost="https://"+host+"/davidsAwesomeReactApplication/api/employees"
        }
        $.ajax({
            url: urlHost
        }).then(function (data) {
            self.setState({employees: data._embedded.employees});
        });
    }

    componentDidMount() {
        this.loadEmployeesFromServer()
    }

    render() {
        return ( <EmployeeTable employees={this.state.employees}/> );
    }
}

ReactDOM.render(<App />, document.getElementById('root') );

Answer 1

替换

var rows = [];
this.props.employees.forEach(function (employee) {
    rows.push(React.createElement(Employee, { employee: employee }));
});

与

var rows = this.props.employees.map(function (employee) {
    return (
      <Employee employee={employee}>
    );
});

您可以将每个员工对象映射到<Employee />组件。对React.createElement()的调用可以用JSX替换。这是一回事。后者是前者的语法糖，更好地可视化。

现在，无论何时在React中使用数组并从对象映射到组件，都需要在每个组件上定义关键道具。所以只需执行以下操作：

<Employee key={employee.id} employee={employee}>

关键道具应该是一个唯一的标识符，因此假设您的员工对象有一个id，那应该就是这样。

React - 从react.createClass更改为compentnt类关键问题

1 个答案: