Question

使用ajax数据渲染我的组件时遇到了麻烦。

我不知道如何使用ajax数据在我的渲染中插入一个组件。

这是我的AccountPage.js

'use strict'

import React from 'react'
import Done from '../../icons/Done'
import Close from '../../icons/Close'
import Delete from '../../icons/Delete'
import Edit from '../../icons/Edit'
import List from '../../icons/List'
import '../../../../css/accounts.css'

class AccountSimple extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          first_name: '',
          account: '',
          address: ''

        };
    }

    componentDidMount() {
          this.setState({
            first_name: this.props.acc.first_name,
            last_name: this.props.acc.last_name,
            account: this.props.acc.account,
            address: this.props.acc.address
          });
          console.log(this.props.acc);

    }

    render() {

        return (
                <div className="account-table-row-body-tr">
                  <div className="account-table-row-body-td account-table-td-name">{this.state.first_name} {this.state.last_name}</div>
                  <div className="account-table-row-body-td account-table-td-account">{this.state.account}</div>
                  <div className="account-table-row-body-td account-table-td-address">{this.state.address}</div>
                  <div className="account-table-row-body-td account-table-td-actions">
                    <List svgClass="account-table-td-actions-list" width="24" height="24" />
                    <Edit svgClass="account-table-td-actions-edit" width="24" height="24" />
                    <Delete svgClass="account-table-td-actions-delete" width="24" height="24" />
                  </div>
                </div>

        );
    }
}

export default AccountSimple

AccountPage导入AccountSimple

{{1}}

我想要的是在AccountPage的渲染中渲染＃。

提前致谢。

Answer 1

如果我理解正确，您需要.map data上的对象（假设它是一个数组），并为每个对象创建一个AccountSimple组件。 AccountSimple中不需要状态 - 只需使用道具。

内部AccountPage#render：

<div id="table-body" className="account-table-row account-table-row-body">
    { data && data.map(accountInfo =>
        <AccountSimple {...accountInfo} />
    )}
</div>

检查是否已加载data，然后当它可用时，将每个数据行作为道具传递给AccountSimple。

AccountSimple应该是无状态组件 - 它不需要constructor或componentDidMount方法，它只能有一个render方法并参考this.props而不是this.state。

反应ajax渲染

1 个答案: