如何在反应中循环通过状态

Question

我有一个名为List的类，我从api中检索了一些数据，并将其置于状态，并且正在恢复这些数据

componentDidMount(){
    const sendData = new FormData();
    const thiss=this;
    sendData.append('func','list');
    sendData.append('qry','select * from student');   
    axios.post("http://localhost/freact/index.php",sendData)
    .then(
        (resp)=>{
            Object.keys(resp).forEach(function(key) {
              thiss.arr.push(resp[key]);
            });
            this.setState({data:this.arr});
        }
    )
}

我如何以接收的表格格式打印此数据 我从api检索数据的代码是

{{1}}

Answer 1

假设您将数据存储在名为data的变量中

您可以尝试

renderTable = () => (
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Fname</th>
        <th>Mobile</th>
        <th>Photo</th>
      </tr>
   </thead>
   <tbody>
     {this.state.data.map(rowData => (
        <tr key={rowData.id}>
          <td>{rowData.id}</td>
          <td>{rowData.name}</td>
          <td>{rowData.fname}</td>
          <td>{rowData.mobile}</td>
          <td>{rowData.photo}</td>
       </tr>
     ))}
   </tbody>
  </table>
 )

如果您不想在表主体中呈现纯文本，并且想要使用类似<img> or <div>的元素，也可以在<td/>中尝试使用

<td><img src={validSource} alt="alt" /></td>

在render方法中调用如下相同的renderTable函数

render() {
  return(
    <div>
      {this.renderTable()}
    </div>
  )
}

Answer 2

如果您只想获得答复：

const sendData = new FormData();
sendData.append('func','list');
sendData.append('qry','select * from student');  // atencion at slq injection here

用axios结束：

const config = { headers: { 'Content-Type': 'multipart/form-data' } };
axios.post('http://localhost/freact/index.php',sendData,config).then(response => this.setState({ users: response.body }));

使用fetch获取：

fetch('http://localhost/freact/index.php', {
    method: 'POST',
    body: formData
}).then((r) => {

    const contentType = r.headers.get("content-type");
    if (contentType && contentType.indexOf("application/json") !== -1) {

        return r.json().then(data => ({status: r.status, body: data}));

    } else {

        return r.text().then(text => ({status: r.status, body: text}));

    }

}).then((res) => {

    if (res.status == 200) {

        // do something
        this.setState({ users: res.body })

    } else {
        // handle error
        console.warn(res.body.message)

    }

}).catch((err) =>  {

    console.log(err);

});

在render中：

render() {

    const { users } = this.state

    return (
            <div>
                <table>
                    <thead>
                        ....
                    </thead>
                    <tbody>
                        {
                            users.map(user => {
                                return <tr>
                                    <td>{user.name}</td>
                                    ...
                                </tr>
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
}

Answer 3

您可以使用map来实现 尝试这样编写代码：

 <table>
 <thead><tr><th>title</th></tr>
  </thead><tbody>
   { this.state.mydata.map(x  => 
   <tr><td>{x.title}</td></tr>}
   </tbody>
   </table>

或者您可以不使用表来使其更易于理解。

   <div>
    {this.state.yourstatename.map
    (Myanyname=> 
   <div>{Myanyname.yourfield}</  div>
    } 
    </div>

（对于代码，您应该更改字段，例如，数据中没有标题字段） 如果您想获得更具体的帮助，还应该分享您的反应代码

希望您能理解并为您工作

Answer 4

第一步将被声明为数组的状态变量

状态= {数据：[]}

将收到的数据设置为数据状态

this.setState({
  data : response.data

}）

然后您可以访问状态数据，例如this.state.data

render(){
  const { data } = this.state
  return (
   <table>
      <tr>
         <th>Id</th>
         <th>Name</th>
         <th>Mobile</th>
         <th>Photo</th>
      </tr> 
      {data && data.map(rowData => ( 
        <tr key={rowData.id}>
          <td>{rowData.id}</td>
          <td>{rowData.name}</td>
          <td>{rowData.mobile}</td>
          <td>{rowData.photo}</td>
         </tr> 
       )} 
   </table>
  )
}

完整的示例代码click here