如何将此特定类组件转换为功能组件答案

【问题标题】：How to I convert this particular class component to function component如何将此特定类组件转换为功能组件
【发布时间】：2021-01-21 18:08:27
【问题描述】：

我使用类组件已经有一段时间了，所以我想将我当前的代码更改为一个函数组件，这样我就可以做一些我想向它添加类组件的一些元素的事情。但当然它不起作用，因为它不同。

class Posts extends React.Component {
    state = {
        data: [],
        loading: false,
        hasMore: true,
    };

    componentDidMount() {
        this.fetchData(res => {
        this.setState({
            data: res.results,
        });
        });
    }

    fetchData = callback => {
        reqwest({
        url: fakeDataUrl,
        type: 'json',
        method: 'get',
        contentType: 'application/json',
        success: res => {
            callback(res);
        },
        });
    };

    handleAddToCart = slug => {
      this.setState({ loading: true });
      authAxios
        .post(addToCartURL, { slug })
        .then((res) => {
          console.log(res.data);
          this.setState({ loading: false });
        })
        .catch(err => {
          this.setState({ error: err, loading: false });
        });
    };

    
    return;
        }
        this.fetchData(res => {
        data = data.concat(res.results);
        this.setState({
            data,
            loading: false,
        });
        });
    };

    render = (props) => {
        return (...)}

请我只是希望能够保持原样，但在功能组件中，我尝试过但它不起作用。

【问题讨论】：

你的组件中间的return;是什么？
我只是想说一些东西在return中，我觉得它不重要所以我删除它并表示有一些东西带有“...”

标签： javascript reactjs react-native

【解决方案1】：

与此类似：

export default function Posts() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    fetchData((res) => {
      setData(res.results);
    });
  }, []);

  const fetchData = (callback) => {
    reqwest({
      url: fakeDataUrl,
      type: "json",
      method: "get",
      contentType: "application/json",
      success: (res) => {
        callback(res);
      }
    });
  };

  handleAddToCart = (slug) => {
   setLoading(true);
    authAxios
      .post(addToCartURL, { slug })
      .then((res) => {
        console.log(res.data);
        setLoading(false)
      })
      .catch((err) => {
        //this.setState({ error: err, loading: false }); similar state
      });
  };
}

【讨论】：

好像你忘记了const handleAddToCart。成功后fetchDataloading应该是false

【解决方案2】：

你需要使用useEffect和useState：

const Posts = (props) => {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [hasMore, setHasMore] = React.useState(true);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    setLoading(true);
    reqwest({
      url: fakeDataUrl,
      type: 'json',
      method: 'get',
      contentType: 'application/json',
      success: (res) => {
        setLoading(false);
        setData(res.results);
      },
    });
    // return abortController.signal.abort
  // Do initial fetch when fakeDataUrl changes
  }, [fakeDataUrl]);

  const handleAddToCart = slug => {
    setLoading(true);
    authAxios
      .post(addToCartURL, { slug })
      .then((res) => {
        console.log(res.data);
        setData(`${data}${res.results}`); // concat?
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  };

  return </>;
}

注意事项：

传递给React.useEffect 的匿名函数的-commented- 返回值用于取消订阅 该效果。在此示例中，正确的取消订阅应该是中止正在进行的连接（超出此问题/答案的范围）。
您问题中的奇怪代码看起来像是您想将handleAddToCart fetch 结果连接到其他地方，但您需要注意不变性。澄清问题以获得更好的答案;）
没有在任何地方处理该错误。
组件不呈现任何内容。
我不知道reqwest 方法（错字？）。此外，没有错误处理。

【讨论】：