javascript - React.js:如何将道具传递给组件?
问题描述
我想让API 调用可重用并在其他组件中使用它的功能。我在Hook/index.js组件中获取API 。然后我想在另一个组件中遍历从 API 获取的数据,将其作为参数并在其他组件中使用。
我有一个用于flag(img)的Flag/index.js组件,并且想要获取图像的 url 作为参数并在Flag/index.js组件中使用。
任何帮助将不胜感激。
在Hook/index.js我获取API
import React, { useState, useEffect } from "react";
import "./hook.scss";
export default function Hook(){
const [data, setData] = useState([]);
const [error, setError] = useState(null);
const [search, setSearch] = useState("");
const fetchData = () => {
fetch("https://restcountries.eu/rest/v2/all")
.then((res) => res.json())
.then((result) => setData(result))
.catch((err) => console.log("error"));
};
useEffect(() => {
const searchResult = data && data.filter((item) => item.name.toLowerCase().includes(search));
setSearch(searchResult);
}, []);
useEffect(() => {
fetchData();
}, []);
return [data, error];
}
在 App.js 中,我通过 API 数据进行映射
import React, { useState }from "react";
import Header from "./components/Header";
import SearchBar from "./components/SearchBar";
import Flag from "./components/Flag";
import useCountries from "./Hooks";
import "./App.scss";
export default function App () => {
const [data, error] = useCountries();
return (
<div className="App">
<SearchBar />
<Header />
{data &&
data.map((country) => (
<div className="CountryList" key={country.name}>
<div className="CountryListImg">
<img src={country.flag} alt="" width="80px" /> if change here to flag={country.flag} I see link in browser
</div>
<div className="countryName">{country.name}</div>
<div className="population">{country.population}</div>
<div className="region">{country.region}</div>
<div>
{country.languages.map((language, languageIndex) => (
<div key={languageIndex}>{language.name}</div>
))}
</div>
</div>
))}
<useCountries />
</div>
);
return [data, error]
}
而我的Flag/index.js组件,当然不起作用
import React from "react";
import "./flag.scss";
export default function Flag({flag}) {
return (
<div className="">
<img src={flag} alt="" width="80px" />
</div>
);
};
如何制作工作搜索栏。现在它在控制台中显示未定义
import React, {useState} from "react";
import "./SearchBar.scss";
export default function Searchbar({data}) {
const [search, setSearch] = useState("");
function handleChange(e) {
setSearch(e.target.value);
}
console.log(data)
return (
<div className="SearchBar">
<input
className="input"
type="text"
placeholder="search country ..."
value={data}
onChange={handleChange}
/>
{data && data.filter((item) => item.name.toLowerCase().includes(search))}
</div>
);
};
解决方案
1
我不完全确定这是否能回答问题,但要在其中添加抽象的 Flag 类,您只需更改它:
<img src={country.flag} alt="" width="80px" />
对此:
<Flag flag={country.flag} />