向功能組件添加 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>
    );
}