向功能组件添加 react props

Question

我有一些来自 API 的数据，我想在另一个无状态 function 组件中显示这些数据。

这是 state - const [user, setUser] = useState([]); 这是我要在其他组件中的 output 的数据：

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>
    );
}

Answer 1

不完全确定这是否是您想要的，但请参见下文。 您似乎与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);

Answer 2

这是我现在试图传递给其他较小组件的整个表单组件。

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>
    );
}