Question

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

之前做过reactjs

PS：数据来自asp.net的api ...... you can check the image here

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

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

1 个答案: