×React -TypeError：_this.setState不是函数

Posted 2021-04-05

嗨，我有一个反应功能

import React 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
import FontIcon from 'material-ui/FontIcon';
import IconButton from 'material-ui/IconButton';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField'
//css
import styled from 'styled-components';
// Third party imports
 import _ from 'lodash'


function action() {
  let value = 'null'

  let DATA = [{
    question: 'Lorem12',
    answer: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.']
  }, {
    question: 'Lorem',
    answer: [`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`]
    }, {
      question: 'Lorem2',
      answer: [`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`]
    }]

  let onFilterData = (e) => {
    if (this.filterFn) {
      clearTimeout(this.filterFn)
    }
  let searchText = this.searchText
    this.filterFn = setTimeout( () => this.setState({searchText: value}), 350 )
  }

  return {
    chunks: ['faq'], // routes

    component: (
      <Layout>
        {/* From Import faq */}
        <div style={{backgroundColor: '#F5F5F5', padding: '32px 24px'}}>
          <Grid>
            <GlobalStyles />
            <Row>
              <Col xs={12}  style={{backgroundColor: '#F5F5F5', textAlign: 'center'}}>
                <h2>FAQs |  We’re here to help!</h2>
                <p className='text lightBlack'>Got other questions? Lorem</p>
                <Col xs={12} smOffset={4} sm={6} md={4} style={{marginBottom: 10, textAlign: 'center'}}>
                  <Paper style={{backgroundColor: '#1875D1', display: 'table'}}>
                    <TextField
                      hintText='What can we help you with?'
                      underlineStyle={{display: 'none'}}
                      fullWidth
                      style={{display: 'table-cell', backgroundColor: '#ffffff', paddingLeft: 15, verticalAlign: 'middle'}}
                      onChange={onFilterData.bind(this.searchText)}
                      />
                    <IconButton style={{display: 'table-cell', verticalAlign: 'middle', color: '#ffffff'}}>
                      <FontIcon
                        style={{backgroundColor: '#1875D1', padding: 5}}
                        color={'#fffff'}
                        className='material-icons'>search</FontIcon>
                    </IconButton>
                  </Paper>
                </Col>
              </Col>
            </Row>
          </Grid>
        </div>
        <Grid>
          <Row>
            <Col xs={12} md={3}>
              <div style={{position: '-webkit-sticky', position: 'sticky', top: 0, padding: 12}}>
              <h4 style={{paddingTop: 8}}><strong>Browse by topic</strong></h4>

              </div>
            </Col>
            <Col xs={12} md={9}>
              {_.map(_.filter(DATA, d => _.indexOf(_.toLower(d.question), _.toLower(this.searchText)) > -1 || _.indexOf(_.toLower(d.answer), _.toLower(this.searchText)) > -1), d =>
                <div style={{borderBottom: 'solid 1px black', marginBottom: 28}}>
                  {_.map(d.answer, a => <p>{a}</p>)}
                </div>
              )}
              <div id='orders'>
                <div style={{borderBottom: 'solid 1px black'}}>
                  <h3>Lorem12</h3>
                  <p style={{marginBottom: 28}}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div style={{borderBottom: 'solid 1px black'}}>
                  <h3>Lorem</h3>
                  <p style={{marginBottom: 28}}>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </p>
                </div>
                <div style={{borderBottom: 'solid 1px black'}} >
                  <h3>Lorem2</h3>
                  <p style={{marginBottom: 28}}>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  </p>
                </div>
              </div>
            </Col>
          </Row>
        </Grid>
      </Layout>
    ),
  };
}

export default action;

我正在创建'** onFilterData'**来过滤单词，我的DATA包含对单词的过滤

我的函数里面有一个错误

this.filterFn = setTimeout（（）=> this.setState（{searchText：value}），350）

我得到的错误TypeError：_this.setState不是一个函数

我希望有人可以帮我解决我的错误

答案

您应该将组件从stateLess更改为stateFul，然后使用setState。

使用React.Component：

class Action extends React.Component {}

而不是使用功能：

function action() {}

深入了解的一些东西：

Read more about stateFul components

Read more about the difference between stateFul and stateLess components