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

Question

生命周期可以在箭头函数中使用 componentDidMount() 并且有一个错误我唯一的响应我试图添加一个 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，现在我的状态是未定义的

 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);

Answer 1

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

在你的函数组件的顶部，添加这个（确保从'react'导入useState，就像你对useEffect所做的那样）：

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

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

setArticles(response.items);

而且，在正文中：

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

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

Answer 2

我更新了我的代码 并收到此错误。 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);