Question

嗨我有反应功能

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（（）=＆gt; this.setState（{searchText：value}）， 350）

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

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

Answer 1

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

使用React.Component：

class Action extends React.Component {}

而不是使用功能：

function action() {}

更深入理解的一些东西：

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

1 个答案: