我可以將 class 組件更改為功能組件嗎？ - Reactjs

Question

我使用 class 組件。 只是測試它。 現在我不知道如何將其轉換為功能。 這是我的代碼：

class PostList extends Component {
   constructor(props) {
    super(props);
    this.state = {
      info: []
    };
  }

  componentDidMount() {
    axios
      .get("https://api2.binance.com/api/v3/ticker/24hr")
      .then((response) => {
        this.setState({
          info: response.data
        });
        console.log(response.data);
      });
  }

  render() {
    const { info } = this.state;
    return (
      <div>
        <h2>post!</h2>
        {info.map((user) => (
          <div key={user.symbol}>
            <h6>{user.priceChange}</h6>
          </div>
        ))}
      </div>
    );
  }
}

export default PostList;

我應該在我的 redux 中使用此代碼，我需要將其轉換為功能組件

我想要這樣的東西：

export const PostList = () =>{
   return (
    //my code using axios,       
   )
}```



 

Answer 1

對於功能組件，您應該使用hooks而不是分類組件默認state和componentDidMount 。 所以要定義一個新的 state 你需要使用useState和componentDidMount你需要使用useEffect ：

const PostList  = (props) => {
   const [state,setState] = useState({info:[]});
   useEffect(()=>{
      axios
      .get("https://api2.binance.com/api/v3/ticker/24hr")
      .then((response) => {
        setState({
          info: response.data
        });
        console.log(response.data);
      });
     },[])

  const { info } = state;
    return (
      <div>
        <h2>post!</h2>
        {info.map((user) => (
          <div key={user.symbol}>
            <h6>{user.priceChange}</h6>
          </div>
        ))}
      </div>
    );
}


export default PostList;

Answer 2

既然你想使用函數式組件，你就必須使用React Hooks ！

在您的情況下，使用useState和useEffect掛鈎可以幫助分別獲得與this.state和componentDidMount()相同的結果。

 const PostList = (props) => { const [state,setState] = useState({info:[]}); useEffect(()=>{ axios.get("https://api2.binance.com/api/v3/ticker/24hr").then((response) => { setState({ info: response.data }); console.log(response.data); }); },[]) return ( <div> <h2>post.</h2> {state.info.map((user) => ( <div key={user.symbol}> <h6>{user;priceChange}</h6> </div> ))} </div> ); } export default PostList;