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

标签： javascriptreactjs

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 规则。