javascript - 为什么我在 ReactJs 中得到的表大小是其大小的 4 倍？

Question

我正在尝试编辑一行包含 person 对象的表。我的想法是显示表格，单击要编辑的行后，该行更改为 2 个文本框(要编辑的 Name 和 surname)和一个确认编辑操作的按钮。当我运行程序时，表格显示其大小的 4 倍(我有 4 行)，当我单击随机行时，会消失 4 行，表格变为其大小的 3 倍(12 行)。失败的原因是什么？谢谢你的时间代码:

 class EditPersons extends React.Component {
           constructor(props) {
                super(props);
                this.state = {
                    editing: null
                };
                this.editPerson = this.editPerson.bind(this);
            }
            componentDidMount() {
                this.props.fetchData('http://localhost:9536/persons/');
            }
            editPerson(person) {
                this.setState(
                    { editing: person.PersonId }
                );
            }
            renderPersonOrEdit(person) {
                if (this.state.editing === person.PersonId) {
                    console.log('editing: ' + person.PersonId); //test ok
                    //Here comes the 2 textBoxes and the edit-button
                }
                else {
                    return (
                        <tbody>
                            {this.props.persons.map((person, i) => {
                                return(
                                    <tr key={i}>
                                        <td onClick={()=>this.editPerson.(person)}><Link>{person.Name}<Link></td>
                                        <td>{person.Surname}</td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    );
                }
            }
            render() {

                if (this.props.hasErrored) {
                    return <p>Downloading has failed!</p>;
                }

                if (this.props.isLoading) {
                    return <p>Downloading…</p>;
                }

                return (
                    <div>
                        <table id="myTable">
                            <thead>
                            <tr>
                                <th>Person name</th>
                                <th>Person Surname</th>
                            </tr>
                            </thead>

                            {this.props.persons.map((person) => {
                                return this.renderPersonOrEdit(person);
                            })}
                        </table>
                        <Link to="/project" className="btn btn-primary btn-xs" style={{marginTop: 20}}>Back</Link>
                    </div>

                );
            }
        }

        const mapStateToProps = (state) => {
            return {
                personss: state.persons,
                hasErrored: state.personsHasErrored,
                isLoading: state.personsIsLoading
            };
        };

        const mapDispatchToProps = (dispatch) => {
            return {
                fetchData: (url) => dispatch(personsFetchData(url))
            };
        };

        EditPersons.propTypes = {
            fetchData: PropTypes.func.isRequired,
            persons: PropTypes.array.isRequired,
            hasErrored: PropTypes.bool.isRequired,
            isLoading: PropTypes.bool.isRequired
        };

        export default connect(mapStateToProps, mapDispatchToProps)(EditPersons);

Answer 1

在您的 render() 函数中，您已经映射了元素，然后在 renderPersonOrEdit 中执行相同操作，将代码更改为仅映射渲染功能

class EditPersons extends React.Component {
           constructor(props) {
                super(props);
                this.state = {
                    editing: null
                };
                this.editPerson = this.editPerson.bind(this);
            }
            componentDidMount() {
                this.props.fetchData('http://localhost:9536/persons/');
            }
            editPerson(person) {
                this.setState(
                    { editing: person.PersonId }
                );
            }
            renderPersonOrEdit() {

                if (this.state.editing !== null) {
                    console.log('editing: ' + person.PersonId); //test ok
                    //Here comes the 2 textBoxes and the edit-button

                    //set editing to null after editing the contents
                }
                else {
                return <tbody>
                   {this.props.persons.map((person) => {
                        return (
                             <tr key={person.PersonId}>
                               <td onClick={()=>this.editPerson.(person)}><Link>{person.Name}<Link></td>
                                   <td>{person.Surname}</td>
                             </tr>
                        );
                   })}
                   </tbody>
                }
            }
            render() {

                if (this.props.hasErrored) {
                    return <p>Downloading has failed!</p>;
                }

                if (this.props.isLoading) {
                    return <p>Downloading…</p>;
                }

                return (
                    <div>
                        <table id="myTable">
                            <thead>
                            <tr>
                                <th>Person name</th>
                                <th>Person Surname</th>
                            </tr>
                            </thead>
                            {this.renderPersonOrEdit()}
                        </table>
                        <Link to="/project" className="btn btn-primary btn-xs" style={{marginTop: 20}}>Back</Link>
                    </div>

                );
            }
        }