英文:
Rendering a list from external API in react
问题
以下是您提供的代码的中文翻译：
我试图渲染用户点击的某些信息。当用户点击时，他们将看到代码列表，然后获取额外信息。
让我们从头开始。
首先，我使用了`useState` Hook来初始化选项。
然后，我从外部API获取了一些数据，将数据转换为JSON格式，并更新了选项。然后，我将存储在选项中的数据映射到选项标记，然后在选择标记中返回这些选项。然后，我添加了一个名为`handleClick`的选择标记的事件处理程序。然后，我使用过滤器来获取特定选项。问题在于，当我尝试显示信息时，它并没有显示出来。我尝试使用`console.log`它，它运行得很完美，但当我尝试在列表中显示它时，什么都不显示。
以下是我的代码：
```javascript
import { useEffect, useState } from "react";
function Data() {
// 使用useState Hook初始化选项
const [options, setOption] = useState([]);
useEffect(() => {
// 获取数据
fetch('https://api.n.exchange/en/api/v1/currency/')
.then(response => response.json())
.then(data => setOption(data));
});
function handleClick(event) {
const selectedBase = options.filter(code =>
code.code === event.target.value
);
return (
<ul>
{selectedBase.map(currency => <li>{currency.name}</li>)}
</ul>
);
}
return (
<select onChange={handleClick}>
<option value="" hidden>Select a Currency</option>
{options.map(option => (
<option key={option.code} value={option.code}>
{option.code}
</option>
))}
</select>
);
}
export default Data;
请注意，这是您提供的代码的中文翻译，没有其他内容。
英文:
I'm trying to render the some information that the user clicked on. The user will see a list of codes when clicked upon they just get additional information.
Lets start from the top.
So firstly I used useState Hook to initialize the options.
Then I fetched some data from an external API, converted the data into JSON format and updated options. I then mapped the data that was store in options each into a option tag and returned the options in a select tag. I then added an event handler to the select tag called handleClick. I then used filter to get the specific option. The problem is that when I am trying to display the information but it isn't display. I tried to console.log it and it worked perfect but when I try to display it in a list nothing comes up.
Here is my code:
import { useEffect,useState } from "react"
function Data() {
//Intializing Options using the useState Hook
const [options , setOption] = useState([])
useEffect(() => {
//Fetching the data
fetch('https://api.n.exchange/en/api/v1/currency/')
.then(response => response.json())
.then(data =>
setOption(data)
)
})
function handleClick(event) {
const selectedBase = options.filter(code =>
code.code === event.target.value
)
return(
<ul>
{selectedBase.forEach(currency => <li>{currency.name}</li>)}
</ul>
)
}
return(
<select onChange={handleClick}>
<option select="true" hidden={true}>Select an Currency</option>
{
options.map(options =>
<option key={options.code} value={options.code}>{options.code}</option>
)
}
</select>
)
}
export default Data
答案1
得分: 0
const [optionSelected, setOptionSelected] = useState(0)
function handleClick(){
const selectedBase = options.filter(code =>
code.code === event.target.value
)
setOptionSelected(selectedBase)
}
<><select onChange={handleClick} value={optionSelected}>
<option select="true" hidden={true}>选择一种货币</option>
{
options.map(option =>
<option key={option.code} value={option.code}>{option.code}</option>
)
}
</select>
<ul>
// 从optionSelectedState映射的数据
</ul>
</></>
英文:
It's better to create a state to store option selected
const [optionSelected, setOptionSelected] = useState(0)
Then modify your handle change to only just set state option selected not return the jsx, something like this:
function handleClick(){
const selectedBase = options.filter(code =>
code.code === event.target.value
)
setOptionSelected(selectedBase)
}
At the return jsx of your component the reason not showing because you are not storing the value after your choose option, modify like this:
<>
<select onChange={handleClick} value={optionSelected}>
<option select="true" hidden={true}>Select an Currency</option>
{
options.map(options =>
<option key={options.code} value={options.code}>{options.code}
</option>
)
}
</select>
<ul>
//your mapping data from optionSelectedState
</ul>
</>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论