我有一个包含不同类型元素的 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
最佳答案
什么都没有出现的原因是你正在调用一个什么都不返回的函数,所以没有任何东西可以渲染。
您需要返回 .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]))
关于javascript - 如何处理 react 中的异步功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56326623/