我可以将 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。因此，要定义一个新状态，您需要使用 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;