Javascript 如何在reactjs中创建for循环_Javascript_Html_Asp.net_Reactjs_Web

Javascript 如何在reactjs中创建for循环

javascript html asp.net reactjs web

Javascript 如何在reactjs中创建for循环,javascript,html,asp.net,reactjs,web,Javascript,Html,Asp.net,Reactjs,Web,每当我更改索引上的数字时，这段代码都会起作用。我知道我需要使用循环，但我不知道我是如何尝试使用for（int index=0；index>I.length；index++）{但是它不起作用，我很抱歉问这个问题，我真的不知道怎么做 constructor() { super(); this.state = { jsonReturnedValue: [] , name: '', address: '' } } renderItem

每当我更改索引上的数字时，这段代码都会起作用。我知道我需要使用循环，但我不知道我是如何尝试使用

for（int index=0；index>I.length；index++）

{但是它不起作用，我很抱歉问这个问题，我真的不知道怎么做

constructor() {

    super();
      this.state = { jsonReturnedValue: [] ,
      name: '',
      address: ''
      }

    }

renderItem(d, i) {
  let index = 0;
    debugger
    index++;
    let name = d.Employee_Name;
    let address = d.Address;
      //  for (int index = 0 ; index > i.length ; index++){

    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>
}

constructor（）{
超级（）；
this.state={jsonReturnedValue:[]，
名称：“”，
地址：''
}
}
renderItem（d，i）{
设指数=0；
调试器
索引++；
让name=d.Employee\u name；
让地址=d.地址；
//对于（int index=0；index>i.length；index++）{
返回
{d.Employee_ID}
{d.Employee_Name}
{d.Address}
this.props.onClick（i）}data toggle=“modal”data target=“#UpdateEmployee”>编辑
删除
&时代；
更新员工
名称
地址
更新员工
接近
}

这就是我叫桌子的地方

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>

componentDidMount（）{
取（'http://localhost:5118/api/employeedetails/getemployeedetails')
。然后（（响应）=>{
返回response.json（）}）
。然后（（json）=>{
this.setState（{jsonReturnedValue:json}）；
});
}
render（）{
让{jsonReturnedValue}=this.state；
返回(
雇员名单
添加员工
身份证件
名称
地址
更新
删除
{jsonReturnedValue.map（（d，i）=>this.renderItem（d，i））}

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

PS：数据来自asp.net的api…

您能提供

jsonReturnedValue

的结构/值吗？另外，您能提供

renderItem

的实现吗？您的for条件（int index=0；index>i.length；index++）无效，您可能需要index

[html]相关文章推荐

随机文章推荐