ReactJS箭头主体周围的异常块语句

Question

 ...  
    renderSuggestion = suggestion => {
        return (
          <div className="result">
            <div>{suggestion.fullName}</div>
            <div className="shortCode">{suggestion.shortCode}</div>
          </div>
        );
      };
    ...

它是一个tsx文件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Autosuggest from 'react-autosuggest';
import axios from 'axios';
import { debounce } from 'throttle-debounce';
import { root } from 'postcss';

class AutoComplete extends React.Component {
  state = {
    value: '',
    suggestions: []
  };

  componentWillMount() {
    this.onSuggestionsFetchRequested = debounce(500, this.onSuggestionsFetchRequested);
  }

  renderSuggestion = suggestion => return (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
  );
  };

  onChange = (event, { newValue }) => {
    this.setState({ value: newValue });
  };

  onSuggestionsFetchRequested = ({ value }) => {
    axios
      .post('http://localhost:9200/crm_app/customers/_search', {
        query: {
          multi_match: {
            query: value,
            fields: ['fullName', 'shortCode']
          }
        },
        sort: ['_score', { createdDate: 'desc' }]
      })
      .then(res => {
        const results = res.data.hits.hits.map(h => h._source);
        this.setState({ suggestions: results });
      });
  };

  onSuggestionsClearRequested = () => {
    this.setState({ suggestions: [] });
  };

  render() {
    const { value, suggestions } = this.state;

    const inputProps = {
      placeholder: 'customer name or short code',
      value,
      onChange: this.onChange
    };

    return (
      <div className="App">
        <h1>AutoComplete Demo</h1>
        <Autosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={suggestion => suggestion.fullName}
          renderSuggestion={this.renderSuggestion}
          inputProps={inputProps}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<AutoComplete />, rootElement);
export default AutoComplete;

Answer 1

存在语法错误：

  renderSuggestion = suggestion => return (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
  );
  };

可以是：

  renderSuggestion = suggestion => (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
  );

或者：

  renderSuggestion = suggestion => {
  return (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
  );
  };

Linter错误是指该道具：

getSuggestionValue={suggestion => suggestion.fullName}

这将导致在每个render调用中创建新函数。这不是很大的开销。可以将其定义为this.getSuggestionValue回调，也可以禁用linter规则。

Answer 2

您在这里遇到语法错误：

renderSuggestion = suggestion => return (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
);

要在“箭头功能”中使用“ return”语句，您需要为功能it-self打开一个块。

可以这样做：

renderSuggestion = () => {
    return (
        <div className="result">
          <div>{suggestion.fullName}</div>
          <div className="shortCode">{suggestion.shortCode}</div>
        </div>
    );
};

或者您无需打开功能块就可以立即返回值：

renderSuggestion = suggestion => (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
);

Answer 3

替换您的代码：

renderSuggestion = suggestion => return (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
  );
  };

与此：

renderSuggestion = suggestion => (
    <div className="result">
      <div>{suggestion.fullName}</div>
      <div className="shortCode">{suggestion.shortCode}</div>
    </div>
  );

我所做的是修复一些语法错误。希望有帮助！