javascript - 尝试使用中的空白表
问题描述
部分问题是输入中输入的值正是我所说的返回元素的意思,即“[]”预期的结果是要输入:名称输出:名称+ img等,期间没有错误输出和控制台中返回的消息只有 [] 看起来好像提前丢失了一些东西谢谢你的帮助:)
App.js
<div>
<Nav />
<DataContext>
<Switch location={location} key={location.pathname}>
{routes.map(({ path, Component }) => (
<Route
key={path}
exact
path={path}
component={Component}
/>
))}
</Switch>
</DataContext>
</div>
//Data.js
export const DataContext = createContext();
const url = `https://corona.lmao.ninja/v2/countries`;
function Data(props) {
const [state, setState] = useState({ countries: [] });
useEffect(() => {
axios.get(url).then((res) => {
const countries = res.data;
setState({ countries });
});
}, []);
return (
<DataContext.Provider value={{ state, setState }}>
{props.children}
</DataContext.Provider>
);
}
export default Data;
Countries.js
const Div = styled.div`
padding: 10vh 0 0 0;
`;
function Countries() {
const [find, setFind] = useState("");
const [filteredData, setFilteredData] = useState([]);
const dataContext = useContext(Data.DataContext);
const { state } = dataContext;
const content = state.countries;
useEffect(() => {
setFilteredData(
content.filter((country) =>
country.toString().toLowerCase().includes(find)
)
);
}, [find, content]);
return (
<Div>
<div>
<input
type="text"
placeholder="Search"
value={find}
onChange={(e) => setFind(e.target.value)}
/>
</div>
<div>
{filteredData.map((r, i) => (
<div key={i}>
<Card style={{ width: "18rem" }}>
<Card.Img src={r.countryInfo.flag} variant="top" />
<Card.Body>
<Card.Title>{r.country}</Card.Title>
<Link to={`/${r.country}`}>
<Button variant="primary">Visit</Button>
</Link>
</Card.Body>
</Card>
</div>
))}
</div>
</Div>
);
}
export default Countries;
解决方案
问题解决了
useEffect(() => {
const filter = content.filter((state) => {
return state.country
.toLowerCase()
.includes(find.toLocaleLowerCase());
});
setFilteredData(filter);
}, [find, content]);
推荐阅读
- r - 使用多个文字分隔符在 R 中的数据框中拆分字符串
- python - 无法解析 [{ 和 }] Python 之间返回的 JSON 数据
- python - Kivy 配置设置默认选项
- java - 尝试将文件上传到 slack chanel 并收到“invalid_form_data”或“no_file_data”错误
- python - 遍历字典列表并打印消息
- ocaml - OCaml中二叉树中的尾递归最大元素
- sql - Redshift中日期之间的时间间隔差异
- kotlin - Kotlin-没有从every.eager块中获取参数的值
- r - R - 在多个列中应用条件忽略 NA
- c++ - C++ MATLAB 引擎不会输出到控制台