未定义将反应类组件转换为具有状态的功能组件的问题

问题描述

是否可以使用 componentDidMount() 在 Arrow 函数中使用生命周期，但我尝试添加 useEffect 时出现错误是我唯一的响应？尝试将类组件转换为功能组件。
我在下面的单独项目中创建了一个内容丰富的博客，并希望将我的博客添加到我的主项目中的 blog.js 页面。

有效的原创内容博客。

博客.js

import React from "react";
import "./App.css";
import { client } from "./client";
import Posts from "./components/blog/Posts";

class App extends React.Component {
  state = {
    articles: [],};

  componentDidMount() {
    client
      .getEntries()
      .then((response) => {
        console.log(response);
        this.setState({
          articles: response.items,});
      })
      .catch(console.error);
  }

  render() {
    return (
      <div className="App">
        <div className="container">
          <header>
            <div className="wrapper">
              <span>React and Content</span>
            </div>
          </header>
          <main>
            <div className="blog__page">
              <h1 class="blog__page__header">ZILAH MUSIC PUBLISHING NEWS</h1>
              <div className="blogs">
                <div className="wrapper">
                  <Posts posts={this.state.articles} />
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    );
  }
}

导出默认应用；

我添加了一个 useEffect，现在我的状态是 undefined

 useEffect(() => {
    client
      .getEntries()
      .then((response) => {
        console.log(response);
        this.setState({
          articles: response.items,});
      })
      .catch(console.error);
  },[]);

我复制了我之前运行的页面并想包含我的博客，但我在转换时遇到问题enter image description here

import React,{ useEffect,useState } from "react";
import { Link,Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { client } from "../../client";
import Posts from "../../components/blog/Posts";

import "./Blog.css";

class App extends React.Component inside an arrow function

const Blog = ({ isAuthenticated }) => {
  if (isAuthenticated) {
    return <Redirect to="/dashboard" />;
  }


useEffect(() => {
        client
          .getEntries()
          .then((response) => {
            console.log(response);
            this.setState({
              articles: response.items,});
          })
          .catch(console.error);
      },[]);

  return (
    <React.Fragment>
      <div className="App">
      <div className="container">
          <header>
            <div className="wrapper">
              <span>React and Content</span>
            </div>
          </header>
          <main>
            <div className="blog__page">
              <h1 className="blog__page__header">
                ZILAH MUSIC PUBLISHING NEWS
              </h1>
              <div className="blogs">
                <div className="wrapper">
                  <Posts posts={this.state.articles} />
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </React.Fragment>
  );
};

Bog.propTypes = {
  isAuthenticated: PropTypes.bool,};

const mapStatetoProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,});

export default connect(mapStatetoProps)(Blog);

解决方法

函数组件使用 useState 钩子代替 this.setState 和 this.state (https://reactjs.org/docs/hooks-state.html)。

在函数组件的顶部，添加以下内容（确保像使用 useState 一样从 'react' 导入 useEffect）：

const Blog = ({ isAuthenticated }) => {
  const [articles,setArticles] = useState([]);
  //... etc

然后，代替 this.setState() 使用：

setArticles(response.items);

而且，在正文中：

<div className="wrapper">
  <Posts posts={articles} />
</div>

您的帖子的标题（预期参数 accessToken）似乎与您提到的问题无关，部分原因是说您的状态未定义，这就是该答案解决的问题

,

我更新了我的代码 并收到此错误。 src\components\layout\Blog.js 第 16:35 行：有条件地调用 React Hook “useState”。在每个组件渲染中，必须以完全相同的顺序调用 React Hooks。您是否在提前返回后不小心调用了 React Hook？反应钩子/钩子规则 第 18:3 行：有条件地调用 React Hook “useEffect”。在每个组件渲染中，必须以完全相同的顺序调用 React Hooks。您是否在提前返回后不小心调用了 React Hook？反应钩子/钩子规则

import React,{ useEffect,useState } from "react";
import { Link,Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { client } from "../../client";
import Posts from "../../components/blog/Posts";

import "./Blog.css";
import BlogConnect from "./BlogConnect";

const Blog = ({ isAuthenticated }) => {
  if (isAuthenticated) {
    return <Redirect to="/dashboard" />;
  }

  const [articles,setArticles] = useState([]);

  useEffect(() => {
    client
      .getEntries()
      .then((response) => {
        console.log(response);
        setArticles(response.items);
      })
      .catch(console.error);
  },[]);

  return (
    <React.Fragment>
      <div className="App">
        <div className="container">
          <header>
            <div className="wrapper">
              <span>React and Content</span>
            </div>
          </header>
          <main>
            <div className="blog__page">
              <h1 className="blog__page__header">
                ZILAH MUSIC PUBLISHING NEWS
              </h1>
              <div className="blogs">
                <div className="wrapper">
                  <Posts posts={articles} />
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </React.Fragment>
  );
};

Blog.propTypes = {
  isAuthenticated: PropTypes.bool,};

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,});

export default connect(mapStateToProps)(Blog);