javascript - 向功能组件添加 react props
问题描述
我有一些来自 API 的数据,我想在另一个无状态函数的组件中显示这些数据。
这是状态 -const [user, setUser] = useState([]);
这是我想在其他组件中输出的数据:
const getData = async () => {
const response = await fetch(`https://api.github.com/users/${search}`);
const data = await response.json();
setUser(data);
};
我为其他组件尝试的事情是:
const ProfileImg = props => <img src={props.avatar_url} alt="avatar" />; // or props.user.avatar_url
我也尝试解构,但我无法获取数据。
这是我现在试图传递给其他较小组件的整个表单组件。
import React, { useState } from 'react';
import styled from 'styled-components';
const Form = (props) => {
const [search, setSearch] = useState('');
// const [formVal, setForm] = useState('');
const [user, setUser] = useState([]);
const updateSearch = e => {
setSearch(e.target.value);
}
const getSearch = e => {
e.preventDefault();
getData();
// setForm(search);
setSearch('');
}
const getData = async () => {
const response = await fetch(`https://api.github.com/users/${search}`);
const data = await response.json();
setUser(data);
// console.log(data);
}
return (
<React.Fragment>
<StyledForm onSubmit={getSearch}>
<input type="text" value={search} onChange={updateSearch} placeholder="Search for a user" />
</StyledForm>
<div>
<h2>{user.followers}</h2>
</div>
</React.Fragment>
);
}
解决方案
不完全确定这是否是您想要的,但请参见下文。您似乎与 上的道具很接近ProfileImage
,但需要根据以下内容进行轻微更改以呈现正确的头像:
import React, {useState, useEffect} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const ProfileImg = props => <img src={props.user.avatar_url} alt="avatar" />;
function App() {
const [user, setUser] = useState([]);
useEffect(() => {
const getData = async () => {
const response = await fetch(`https://api.github.com/users/h3h394`);
const data = await response.json();
console.log(data);
setUser(data);
};
getData();
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<ProfileImg user={user}/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
推荐阅读
- php - Docker 上的 Nginx + PHP 提供静态文件
- flutter-layout - 如何在android studio中打开flutter现有项目?我在那里向您展示如何成功
- ios - TestFlight React Native Expo 在启动时崩溃
- docker - BrowserSync 在使用 Docker 时不断重新加载
- php - Woocommerce - 隐藏特定产品类别的产品图片
- xtext - Xtext:自定义生成器的调用方式
- python - 调整 tkinter Label 中的文本以占用所有可用空间
- xcode - 可可豆荚:路径 => '
'不工作 - python - ImportError:无法从“pandas”导入名称“DtypeArg”
- python-3.x - 构建一个数据库 url 以将 fastapi 连接到我的本地 postgresql 数据库