reactjs 我需要在react中将代码从类组件更改为函数组件

gv8xihay 于 9个月前发布在 React

关注(0)|答案(1)|浏览(124)

我想把下面的代码从类转换成React函数组件。我想把状态和组件转换成React钩子。但我不知道如何正确使用函数类，如果有人想给予一些例子如何正确地做。
一个小的例子就足够了，例如处理数据，处理数据发布以及如何将componentdidmount改为useeffect。谢谢。

const BASE_URL = "https://dummyapi.io/data/v1";
const key = '618479acc2ef5ba8018516ac'

class Detail extends Component {
    state = {
        data: [],
        id: "",
        dataPost: [],  
    };

    handleData = (X) => {
        axios
            .get(`${BASE_URL}/user/${X}`, { headers: { "app-id": key } })
            .then((res) => {
                this.setState({ data: res.data });
                console.log(res.data);
            })
            .catch(console.error);
    };

    handleDataPost = (X) => {
        axios
            .get(`${BASE_URL}/user/${X}/post`, { headers: { "app-id": key } })
            .then((res) => {
                this.setState({ dataPost: res.data.data });
            })
            .catch(console.error);
    };

    componentDidMount() {
        this.handleData(this.props.match.params.id);
        this.handleDataPost(this.props.match.params.id);
        console.log(this.props);
    
    }

    render() {
        return (
            <div>
                <h4 style={{marginTop: '150px'}}>{this.state.data.firstName + " " + this.state.data.lastName}</h4>
                <h4>{this.state.data.email}</h4>
            </div>
        );
    }
}

export default Detail;

字符串
我试着改变它，这是它的样子。我不知道该怎么做的数据库，数据库数据发布，以及如何使用useEffect。任何人都可以展示的例子？我想解决这个问题。

function Detail () {

    const [data, setData] = useState([]); 
    const [id, setID] = useState("");
    const [dataPost, setDataPost] = useState([]);  

    const handeData = (X) => {
        axios.get(`${BASE_URL}/user/${X}`, { headers: { "app-id": key } })
        .then(res => {
            setData(res.data.data)
            console.log(res)
        })
        .catch(err =>{
            console.log(err)
        })
    }
}

export default Detail;

型

reactjs

来源：https://stackoverflow.com/questions/70603811/i-need-to-change-the-code-from-class-component-to-function-component-in-react

1条答案

按热度按时间

62o28rlo1#

我把你的类组件改为钩子：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

const BASE_URL = 'https://dummyapi.io/data/v1';
const key = '618479acc2ef5ba8018516ac';

export const Detail = (prosp) => {
  const { id } = useParams();
  const [data, setData] = useState();
  const [id, setId] = useState();
  const [dataPost, setDataPost] = useState();

  const handleData = (X) => {
    axios
      .get(`${BASE_URL}/user/${X}`, { headers: { 'app-id': key } })
      .then((res) => {
        setData(res.data);
        console.log(res.data);
      })
      .catch(console.error);
  };

  const handleDataPost = (X) => {
    axios
      .get(`${BASE_URL}/user/${X}/post`, { headers: { 'app-id': key } })
      .then((res) => {
        setDataPost(res.data.data);
      })
      .catch(console.error);
  };

  useEffect(() => {
    handleData(id);
    handleDataPost(id);
    console.log(props);
  }, []);
  return <div></div>;
};

字符串
在这种情况下，useEffect只会调用一次，如果你想在你的props改变时再次调用它，你可以像这样添加你的依赖项：

useEffect(() => {
    handleData(id);
    handleDataPost(id);
    console.log(props);
  }, [variable]);

型

赞(0）回复(0）举报 9个月前

我来回答

reactjs 我需要在react中将代码从类组件更改为函数组件

1条答案

相关问题

热门标签

最新问答