我是 React 的新手。我正在構建一個小的功能組件來呈現 Pokemon 的弱點。
它將存盤在狀態 (pokemonState.types) 中的 Pokemon 型別作為每個型別的物件陣列，將型別與包含所有型別有效性的 JSON 檔案進行比較（見下文）。
types_data.json
"electric": {
"attack": {
"double": ["flying", "water"],
"half": ["dragon", "electric", "grass"],
"zero": ["ground"]
},
"defense": {
"half": ["electric", "flying", "steel"],
"double": ["ground"],
"zero": []
}
為了獲得我想要的資料，我需要進行多次迭代，我注意到我的組件僅在我指定 return 關鍵字并將我的元素包裝在 HTML 標記中時才會呈現。
不呈現任何內容的函式（但 console.log 不回傳 undefined）
const pokemonTypeChart = () => {
if (!_.isEmpty(pokemonState)) {
const allTypes = Object.entries(types_data);
const typeEffectiveness = allTypes.map(([key, value]) => {
pokemonState.types.map((el) => {
if (el.type.name === key) {
console.log(key, value);
return <p>{el}</p>;
}
});
});
return (
<div>
<h1>Test</h1>
<p>{typeEffectiveness}</p>
</div>
);
}};
運行良好的功能：
const pokemonTypeChart = () => {
if (!_.isEmpty(pokemonState)) {
const allTypes = Object.entries(types_data);
return (
<div>
<h1>Type Effectiveness</h1>
{allTypes.map(([key, value]) => {
return (
<>
{pokemonState.types.map((el, i) => {
if (el.type.name === key)
return <h3 key={i}>{value.defense.double}</h3>;
})}
</>
);
})}
</div>
);
}};
我的問題是：
- 對于不渲染任何東西的函式，問題是每次迭代后我都不使用 return 對嗎？
- 在這種情況下，我的第二個功能是好的做法嗎？有沒有更干凈的方式我應該寫它？
謝謝你的幫助。
uj5u.com熱心網友回復：
您的第一個功能不起作用的原因是您正在回傳<p>{el}</p>.
el 等于一個物件 & 你期待一個字串。
具體來說，在這種情況下，它類似于 {type:{name: "electric"}
如果您將該行從 更改return <p>{el}</p>;為return <p>{el.type.name}</p>;，那么這將修復我們的內部.map，因此您會越來越近。
但是，您還有第二個問題……外部.map函式沒有回傳任何內容。您的typeEffectiveness變數是我們最終要渲染的變數，該變數等于呼叫allTypes.map. 當您的嵌套pokemonState.types.map函式回傳給父.map函式時，您的父.map函式沒有 return 陳述句。
最終，您正在渲染{typeEffectiveness}，因此我們必須確保該變數是一個將渲染到 DOM 的 react 元素陣列。
還有一些其他的小問題。也就是說，我們必須洗掉<p>{typeEffectiveness}</p>這里的段落標簽 ，否則我們最終會得到嵌套p標簽，因為typeEffectiveness串列中的每個專案都已經包含在<p></p>.
最后，您還應該將關鍵標簽添加到您的串列項中。 <p key="{el.type.name}">{el.type.name}</p>
在此處深入了解串列和鍵的檔案：https : //reactjs.org/docs/lists-and-keys.html
以下代碼是您的第一個函式的除錯版本。
我還在下面包含了您的部分功能的重構版本。映射整個types_data物件條目會相當低效，當我們真的只關心pokemonState.
const e = React.createElement;
const pokemonState ={types: [{type:{name: "electric"}}]};
let types_data = {
"electric": {
"attack": {
"double": ["flying", "water"],
"half": ["dragon", "electric", "grass"],
"zero": ["ground"]
},
"defense": {
"half": ["electric", "flying", "steel"],
"double": ["ground"],
"zero": []
}
}
};
const PokemonTypeChart = () => {
if (!_.isEmpty(pokemonState)) {
const allTypes = Object.entries(types_data);
const typeEffectiveness = allTypes.map(([key, value]) => {
return (pokemonState.types.map((el) => {
if (el.type.name === key) {
return (
<p key="{el.type.name}">{el.type.name}</p>
);
}
}));
});
return (
<div>
<h1>Test</h1>
{typeEffectiveness}
</div>
);
}};
const domContainer = document.querySelector('#pokemon');
ReactDOM.render(e(PokemonTypeChart), domContainer);<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
<div id="pokemon"></div>const e = React.createElement;
const pokemonState ={types: [{type:{name: "electric"}}]};
let types_data = {
"electric": {
"attack": {
"double": ["flying", "water"],
"half": ["dragon", "electric", "grass"],
"zero": ["ground"]
},
"defense": {
"half": ["electric", "flying", "steel"],
"double": ["ground"],
"zero": []
}
}
};
const PokemonChart = () => {
if (!_.isEmpty(pokemonState)) {
const plistItems = pokemonState.types.map((item) =>
types_data[item.type.name].defense.double.map((i) =>
<p key={i}>{i}</p>
));
return (
<div>
<h1>Type Effectiveness</h1>
{plistItems}
</div>
);
}};
const domContainer = document.querySelector('#pokemon');
ReactDOM.render(e(PokemonChart), domContainer);<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
<div id="pokemon"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/356442.html
標籤：javascript 数组 反应 json 目的
上一篇：按鈕在固定包裝內不起作用
下一篇：有條件地加載然后參考外部JS