表模式不会读取任何其他行reactjs

Question

我有一个问题，它只读取第一行项目，我不知道为什么这样做。我如何使用 foreach 循环或任何类型的代码来使其工作，因为除了第一行之外它不会读取任何其他行？我很困惑，因为我以前没有做过reactjs。

PS：数据来自asp.net的API：

renderItem(d, i) {
    debugger

    return <tr key={i} >
  <td> {d.Employee_ID} </td>
        <td>{d.Employee_Name}</td>
        <td>{d.Address}</td> 
        <td><center>
  <button className ="btn btn-info" onClick={() => this.props.onClick(i) }   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
  <td><center><button className ="btn btn-danger">Delete</button></center></td>

<div className="modal fade" id="UpdateEmployee" role="dialog">
         <div className="modal-dialog">
           <div className="modal-content">
              <div className="modal-header">
                 <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Update Employee</h4>
              </div>
          <div className="container">
            <div className="modal-body">
                <table> 
                <tbody>
                <tr>
                <td>Name</td>
                <td> <input type="text"value={d.Employee_Name} /> </td>
                </tr>
                <tr>
                <td>Address</td>
                <td><input type="text" value={d.Address} />  </td>
                </tr>
                </tbody>
                </table>
            </div>
            </div>
            <div className="modal-footer">
              <botton className="btn btn-info"> Update Employee</botton>
              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
 </tr>
}

Answer 1

import React from 'react';
import 'whatwg-fetch';

export default class employee extends React.Component {

    constructor() {
        super();
          this.state = { jsonReturnedValue: [] }

        }

    renderItem(d, i) {
        debugger

        return <tr key={i} >

      <td> {d.Employee_ID} </td>
            <td>{d.Employee_Name}</td>
            <td>{d.Address }</td> 
            <td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) }   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
      <td><center><button className ="btn btn-danger">Delete</button></center></td>

    <div className="modal fade" id="UpdateEmployee" role="dialog">
             <div className="modal-dialog">
               <div className="modal-content">
                  <div className="modal-header">
                     <button type="button" className="close" data-dismiss="modal">&times;</button>
                    <h4 className="modal-title">Update Employee</h4>
                  </div>
              <div className="container">
                <div className="modal-body">
                    <table> 
                    <tbody>
                    <tr>
                    <td>Name</td>
                    <td> <input type="text"value={d.Employee_Name} /> </td>
                    </tr>
                    <tr>
                    <td>Address</td>
                    <td><input type="text" value={d.Address} />  </td>
                    </tr>
                    </tbody>
                    </table>
                </div>
                </div>
                <div className="modal-footer">
                  <botton className="btn btn-info"> Update Employee</botton>
                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
     </tr>
    }

    componentDidMount() {
      fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
      .then((response) => {
        return response.json()})
      .then((json) => {
        this.setState({jsonReturnedValue : json});
      });
  }

    render() {


      let {jsonReturnedValue} = this.state;
        return(

            <div>
        <div className="container">
            <h1> Listof Employees </h1>
          <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
            <table className= "table table-bordered">

                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>
            </table>
          </div>
        {/*Adding*/}
          <div className="modal fade" id="AddEmployee" role="dialog">
             <div className="modal-dialog">
               <div className="modal-content">
                  <div className="modal-header">
                    <button type="button" className="close" data-dismiss="modal">&times;</button>
                    <h4 className="modal-title">Add New Employee</h4>
                  </div>
              <div className="container">
                <div className="modal-body">
                    <table> 
                    <tbody>
                    <tr>
                    <td>Name</td>
                    <td>
                    <input type="text"
                           name={this.props.Employee_Name}
                           className="EmployeeDetails"
                           value={this.props.value}
                           onChange={this.props.handleChange}/> 
                    </td>
                    </tr>
                    <tr>
                    <td>Address</td>
                    <td>
                     <input type="text"
                           name={this.props.address}
                           className="EmployeeDetails"
                           value={this.props.value}
                           onChange={this.props.handleChange}/> 
                    </td>


                    </tr>
                    </tbody>
                    </table>

                </div>
                </div>
                <div className="modal-footer">
                  <botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
                  <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
    </div>
        );
    }
}`

Answer 2

我认为这样的事情应该有效

import React from 'react';
import 'whatwg-fetch';

export default class employee extends React.Component {

let index = -1;
constructor() {
    super();
      this.state = { jsonReturnedValue: [] ,
      name: '',
      address: ''
      }

    }

renderItem(d, i) {
    debugger
    index++;
    let name = d.Employee_Name;
    let address = d.Address;
    return <tr key={i} >

  <td> {d.Employee_ID} </td>
        <td>{d.Employee_Name}</td>
        <td>{d.Address }</td> 
        <td><center><button className ="btn btn-info" onClick={() => this.props.onClick(i) }   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
  <td><center><button className ="btn btn-danger">Delete</button></center></td>

<div className="modal fade" id="UpdateEmployee" role="dialog">
         <div className="modal-dialog">
           <div className="modal-content">
              <div className="modal-header">
                 <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Update Employee</h4>
              </div>
          <div className="container">
            <div className="modal-body">
                <table> 
                <tbody>
                <tr>
                <td>Name</td>
                <td> <input type="text"value={this.state.jsonReturnedValue[index].Employee_Name} /> </td>
                </tr>
                <tr>
                <td>Address</td>
                <td><input type="text" value={this.state.jsonReturnedValue[index].Address} />  </td>
                </tr>
                </tbody>
                </table>
            </div>
            </div>
            <div className="modal-footer">
              <botton className="btn btn-info"> Update Employee</botton>
              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
 </tr>
}

componentDidMount() {
  fetch('http://localhost:5118/api/employeedetails/getemployeedetails')
  .then((response) => {
    return response.json()})
  .then((json) => {
    this.setState({jsonReturnedValue : json});
  });
}

render() {


  let {jsonReturnedValue} = this.state;
    return(

        <div>
    <div className="container">
        <h1> Listof Employees </h1>
      <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
        <table className= "table table-bordered">

            <tbody>
             <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Address</th>
                  <th>Update</th>
                  <th>Delete</th>
             </tr>
                {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
            </tbody>
        </table>
      </div>
    {/*Adding*/}
      <div className="modal fade" id="AddEmployee" role="dialog">
         <div className="modal-dialog">
           <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h4 className="modal-title">Add New Employee</h4>
              </div>
          <div className="container">
            <div className="modal-body">
                <table> 
                <tbody>
                <tr>
                <td>Name</td>
                <td>
                <input type="text"
                       name={this.props.Employee_Name}
                       className="EmployeeDetails"
                       value={this.props.value}
                       onChange={this.props.handleChange}/> 
                </td>
                </tr>
                <tr>
                <td>Address</td>
                <td>
                 <input type="text"
                       name={this.props.address}
                       className="EmployeeDetails"
                       value={this.props.value}
                       onChange={this.props.handleChange}/> 
                </td>


                </tr>
                </tbody>
                </table>

            </div>
            </div>
            <div className="modal-footer">
              <botton className="btn btn-info" onClick = {this.save}> Add Employee</botton>
              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
</div>
    );
}
}