编辑：

Question

我有一个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;

主体对象来自应用程序组件。

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

Answer 1

什么都不出现的原因是您正在调用一个不返回任何内容的函数，因此没有要呈现的任何内容。

您需要返回.map并返回所需的元素。

function renderGeneralData() {
    organizeArray()

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

}

观察

您正在<tr>内部渲染<tr>。我建议删除

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

<tr>
    // returned tr inside another tr
    {renderGeneralData()}
</tr>

我不确定您要如何显示数据，但是我建议删除tr标签之一。

快速提示

如果要删除tr内部的.map，则应使用React.Fragment

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

编辑：

在这部分中，我还注意到您的代码中有些奇怪的地方

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

在代码的这一部分，key将是arrSimple的元素。如果您执行arrSimple[key]，则可能会返回undefined。这是一个例子

arr = ['hey', 'this', 'is', 'bad', '!']
console.log(arr.map((key, i) => arr[key]))

在反应中如何处理异步功能？

1 个答案:

编辑：