我有一組物件,每個物件都有名稱、高度和質量。我有一個組件可以獲取名稱并將它們顯示給瀏覽器。我想要做的是,在一個單獨的組件中,獲取與每個名稱相關的高度和質量。
例如我有:
[
{name: 'Luke Skywalker', height: '172', mass: '77'},
{name: 'C-3PO', height: '167', mass: '75'}
]
我應該提到我正在為這個專案使用反應。我的組件如下:
export default function Character(props) {
const [charStats, setCharStats] = useState("");
const [currentName, setCurrentName] = useState("");
const { name } = props;
useEffect(() => {
axios.get(`${BASE_URL}`)
.then(res => {
setCharStats(res.data);
setCurrentName(name);
})
.catch(err => console.error(err))
}, [])
return (
<div>
<div>{ name }</div>
<button>Stats</button>
{ name === currentName ? charStats.map(char => {
return <Stats height={char.height} mass={char.mass} key={char.name} />;
}) : <h3>Loading...</h3>
}
</div>
)
}
我從另一個組件獲得的名稱道具,我可以 console.log 它并獲取每個單獨的名稱,所以我知道它有效。但是使用上面的代碼,我得到了回傳的每個物件的高度和質量,而不僅僅是與名稱匹配的物件。我怎樣才能具體得到每個物體的高度和質量?
uj5u.com熱心網友回復:
看起來您可能想在使用 map 之前呼叫 filter ,例如:data.filter(x => x.name === name).map(char => {....它回傳一個僅包含與條件匹配的元素的集合)。或者,如果您只想找到一個元素,最好.find(x => x.name === name)改用它
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/429766.html
標籤:javascript 数组 反应 目的
