React JS: map()不工作的对象数组

Question

my console.log

我尝试通过API调用responseTwo.data.searched_items映射数组，这给了我一个数组对象的console.log，但我在HTML中的映射不做任何事情。

var responseTwo = []
axios.request(optionsTwo).then(function (response) {
responseTwo = response
}).catch(function (error) {
console.error(error);
});

我HTML

{
responseTwo.data.searched_items.map((item, index) => {
return (
<tr key={index}>
<td>
<div class="flex items-center space-x-3">
<div>
<p class="font-bold">{item.title}</p>
</div>
</div>
</td>
<td>
<span class="badge badge-ghost badge-sm">{item.condition}</span>
</td>
<td>
<p>${item.price.value}</p>
</td>
<td>
<p>$140</p>
</td>
<td>
<p className='text-accent'>$40</p>
</td>
<th>
<a href={item.url} target="_blank" class="btn btn-primary">Link</a>
</th>
</tr>
)
})
}

Answer 1

const [responseTwo, setResponseTwo] = useState([])

axios.request(optionsTwo).then(function (response) {
setResponseTwo(response)

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

{responseTwo.data.searched_items.length > 0  && responseTwo.data.searched_items.map((item, index) => {
return (
<tr key={index}>
<td>
<div class="flex items-center space-x-3">
<div>
<p class="font-bold">{item.title}</p>
</div>
</div>
</td>
<td>
<span class="badge badge-ghost badge-sm">{item.condition}</span>
</td>
<td>
<p>${item.price.value}</p>
</td>
<td>
<p>$140</p>
</td>
<td>
<p className='text-accent'>$40</p>
</td>
<th>
<a href={item.url} target="_blank" class="btn btn-primary">Link</a>
</th>
</tr>
)
})
}

Answer 2

这是为我测试的

import {useState} from "react";
function App() {
const [responseTwo, setResponseTwo] = useState([])
setTimeout(() => {
setResponseTwo([{name: 'Narek', title: 'Armenia'}, {name: 'Ani', title: 'French'}, {name: 'Gridoryan', title: 'USA'}])
}, 5000)
return (
<div>
{
responseTwo.length > 0 && responseTwo.map((item, index) => {
return (
<tr key={index}>
<td>
<div className="flex items-center space-x-3">
<div>
<p className="font-bold">{item.name}</p>
</div>
</div>
</td>
<td>
<span className="badge badge-ghost badge-sm">{item.title}</span>
</td>
<td>
{/*<p>${item.price.value}</p>*/}
</td>
<td>
<p>$140</p>
</td>
<td>
<p className='text-accent'>$40</p>
</td>
<th>
{/*<a href={item.url} target="_blank" className="btn btn-primary">Link</a>*/}
</th>
</tr>
)
})
}
</div>
)
}
export default App;

Answer 3

Map提供了三个返回iterable的方法:Map .keys()、Map .values()和Map .entries()。用for..in循环试试。