我有一个 body 对象，其中包含不同类型的元素：（ strings 、 number 、 objects ...）。
我需要在表格中显示 body 。
为了做到这一点，我需要在一个表中打印非对象的元素，在另一个表中打印对象元素。

因此，我调用该函数来创建一个包含对象元素的数组 (arrObj) 和另一个包含非对象元素的数组 (arrSimple)。

问题是，当我通过 arrSimple 数组打印表格中的元素时，该数组为空。

有人可以指导我如何解决这个异步问题吗？

const DetailResult = props => {

    ...
    const arrSimple = []
    const arrObj = []

    function organizeArray() {
        for (const prop in body) {
            if (typeof (body[prop]) != 'object') {
                arrSimple[prop] = (body[prop])
            } else if (typeof (body[prop]) == 'object') {
                arrObj[prop] = (body[prop])
            }
        }
    }

    function renderGeneralData() {
        organizeArray()

        arrSimple.map((key, i) => {
            <tr key={i}>
                <td width="25%">{key}</td>
                <td>{(arrSimple[key])}</td>
            </tr>
        })

    }

    return (

        <div>    
            <table className='table table-striped'>
                <tbody>
                    <tr>
                        <th>General Data</th>
                    </tr>
                    <tr>
                        {renderGeneralData()}
                    </tr>
                </tbody>
            </table>
        </div>
    )
}

export default DetailResult;

body 对象来自应用程序组件。

class App extends Component {

    constructor() {
        super()
        this.state = {                       
            dataTable: {                
                transactionID: '',                             
                maxRows: 10,
                currentPage: 0,
                list: {
                    headerList: [],
                    body: []
                }
            }
        }
        this.search = this.search.bind(this)
     }

      search() {
        axios.get(URL)
            .then(resp => this.setState({
                dataTable: Object.assign(this.state.dataTable, {
                    list: [
                        {headerList: ['App name', 'Date', 'Bio data', 'Is verified', 'Actions']},
                        {body: resp.data},
                    ],
                }),

            }))
            .catch(function (error) {
                console.log(error);
            })
    }

我有一个包含搜索字段的组件，用于发出请求

 const SearchComponent = props => {    

        const renderDetailResult = 
            <DetailResult list={props.dtObject.list}
                search={props.search}
            /> 

         return (
            <div role='form' className='searchID'>
                <ContentHeader title={props.componentHeaderTitle} />
                <Grid cols='12 9 10'>
                    <input id="cpf" className='w-25 form-control'
                        placeholder='Type the ID'
                    />
                </Grid>
                <Grid cols='12 3 2'>
                    <IconButton style='primary' icon='search'
                        onClick={props.search}>
                    </IconButton>
                </Grid>
                <Grid cols='12'>
                    {renderDetailResult}
                </Grid>

            </div>
        )
    }

    export default SearchComponent