javascript - 如何处理 react 中的异步功能？

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]))