如何在单击列表项以显示其详细信息时呈现组件?

Question

我有一个仪表板组件，它从API获取所有城市数据并将其存储在城市状态中。 现在我希望当单击城市名称时会打开一个新页面，其中包含单击的城市的所有道具。

function Dashboard() {
const [cities, setcities] = useState(null);
useEffect(() => {
axios.get('http://localhost:2000/city/')
.then(res => {
console.log(res);
setcities(res.data);
});
}, []);
const handleClick = (e) => {
// Here I want to show a detail page of the clicked item //
// <DetailsPage city={e} />
}
return (
<div >
<div>Dashboard</div>
<ul className="list-group list-group-flush">
{cities !== null ?
cities.map(city => {
return (
<li className="list-group-item" key={city._id} onClick={() => handleClick(city)}>
{city.City}
</li>
);
}) :
null
}
</ul>
{console.log(cities)}
</div>
);
}

Answer 1

如果您想在所选城市下显示详细信息，您可以将其保留在组件状态并有条件地渲染它：

function Dashboard() {
const [selectedCity, setSelectedCity] = useState(null);
const [cities, setcities] = useState(null);
useEffect(() => {
axios.get('http://localhost:2000/city/')
.then(res => {
console.log(res);
setcities(res.data);
});
}, []);
const handleClick = (e) => {
setSelectedCity(e)
}
return (
<div >
<div>Dashboard</div>
<ul className="list-group list-group-flush">
{cities !== null ?
cities.map(city => {
return (
<li className="list-group-item" key={city._id} onClick={() => handleClick(city)}>
{city.City}
{selectedCity === city ? <DetailsPage city={city} /> : null}
</li>
);
}) :
null
}
</ul>
{console.log(cities)}
</div>
);
}

---

如果您只想显示选定的城市内容(可能带有后退按钮(：

function Dashboard() {
const [selectedCity, setSelectedCity] = useState(null);
const [cities, setcities] = useState(null);
useEffect(() => {
axios.get('http://localhost:2000/city/')
.then(res => {
console.log(res);
setcities(res.data);
});
}, []);
const handleClick = (e) => {
setSelectedCity(e)
}
if (selectedCity) {
return <DetailsPage city={e} onBack={() => setSelectedCity(null)} />
}
return (
<div >
<div>Dashboard</div>
<ul className="list-group list-group-flush">
{cities !== null ?
cities.map(city => {
return (
<li className="list-group-item" key={city._id} onClick={() => handleClick(city)}>
{city.City}
</li>
);
}) :
null
}
</ul>
{console.log(cities)}
</div>
);
}

---

如果你想要一个具有不同URL的单独页面，它会比这更复杂。

• 你需要使用像react-router这样的路由器。

const handleClick = (e) => {
history.push("/city", { id: e.id });
}

• 您必须阅读两个页面上的数据。因此，您可能需要将城市和所选城市值放在 React 上下文中，以便您可以在详细信息页面上使用它。或者，您可以获取父组件上的数据并将这些状态移动到父组件，以便可以将值传递给两个页面。
• 如果在Dashboard页面上提取数据，则还应处理用户刷新详细信息页面或直接输入 URL 的情况。您可能需要不同的 API 才能按 ID 获取城市。 或者，如果您在详细信息页面上并且没有所需的数据，则可以简单地重定向到Dashboard页面。