React函数组件报错TypeError: _this.setState is not a function求助

Hey there! The error you're hitting is a common pitfall when mixing class component patterns with functional components. Let’s break down why this happens and how to fix it quickly:

Root Cause #

React functional components don’t have a this context like class components do. The this.setState() method is exclusive to class-based components—so trying to call it in a function component will throw that TypeError because _this (which refers to a class instance) doesn’t exist here.

Solution: Use the useState Hook #

For functional components, React provides the useState hook to manage state. Here’s how to refactor your code to use it properly:

1. First, import useState from React:

   import React, { useState } from 'react';
   

2. Declare your state variables at the top of your component function:
   Let’s say you want to track an expanded FAQ item as state. You’d initialize it like this:

   const FAQPage = () => {
     // Initialize state with a default value (e.g., an empty array for no expanded items)
     const [expandedFaqIds, setExpandedFaqIds] = useState([]);
   
     // Rest of your component logic goes here
   };
   

3. Replace this.setState calls with the state updater function:
   Instead of writing:

   this.setState({ expandedFaqIds: [1] });
   

   You’ll use the setExpandedFaqIds function returned by useState:

   setExpandedFaqIds([1]);
   

Example Integration with Your Component #

Here’s how this might look in the context of your FAQ page:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Layout from '../../components/Layout';
import StaticPage from '../../components/StaticPage';
import faq from './faq.md';
import { Col, Row, Grid } from 'react-styled-flexboxgrid';
import GlobalStyles from '../../components/GlobalStyles';
import Link from '../../components/Link';
// Material-ui imports
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import Paper from 'material-ui/Paper';

const FAQPage = () => {
  // State to track which FAQ items are expanded
  const [expandedFaqIds, setExpandedFaqIds] = useState([]);

  // Toggle expansion for a specific FAQ item
  const toggleFaqExpansion = (id) => {
    setExpandedFaqIds(prevIds => 
      prevIds.includes(id) 
        ? prevIds.filter(itemId => itemId !== id) 
        : [...prevIds, id]
    );
  };

  return (
    <Layout>
      <GlobalStyles />
      <Grid>
        <Row>
          <Col xs={12}>
            <StaticPage content={faq} />
            {/* Example FAQ toggle button */}
            <IconButton onClick={() => toggleFaqExpansion(1)}>
              <FontIcon>{expandedFaqIds.includes(1) ? 'expand_less' : 'expand_more'}</FontIcon>
            </IconButton>
          </Col>
        </Row>
      </Grid>
    </Layout>
  );
};

FAQPage.propTypes = {
  // Define your prop types here if needed
};

export default FAQPage;

Quick Additional Checks #

• Make sure you’re not accidentally using class component patterns (like constructor or this.props) in your functional component—props are passed directly as an argument to the function instead.
• If you need to handle side effects (like data fetching), use the useEffect hook instead of class lifecycle methods like componentDidMount.

That should resolve the setState error you’re seeing. Let me know if you need help with any specific part of your component!

内容的提问来源于stack exchange，提问作者Mike Victoria