Question

我正在尝试创建一个具有响应功能的简单搜索过滤器应用，如果用户在搜索栏中键入内容或选中复选框，结果将根据搜索输入显示在屏幕上，但现在renderResult是不返回我的结果列表。我在控制台中没有错误，并且在控制台将结果记录到renderResult函数中时，我得到了正确的结果。但结果不在屏幕上呈现

import React, { Component } from 'react';
import axios from 'axios';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import ReactMultiSelectCheckboxes from 'react-multiselect-checkboxes';

class App extends Component {

state = { 
  name: '',
  style: [],
  furnitures: null 
};

stylesOption = [
  { value: 'classic', label: 'Classic' },
  { value: 'midcentury', label: 'Midcentury' },
  { value: 'scandinavian', label: 'Scandinavian' },
  { value: 'modern', label: 'Modern' },
  { value: 'contemporary', label: 'Contemporary'}
]

componentDidMount(){
  this.fetchFurnitures();
} 

fetchFurnitures = async () => {
  const response = await axios.get('some-url')

  this.setState({ furnitures: response.data.products });

}


onInputChange = e => {
  this.setState({name: e.target.value})
  this.filterInput(e.target.value)
}

onFurnitureStyleChange = e => {
  this.setState({style: e})
  this.filterByStyle(e)
}

filterInput(searchTerm){
  let result = this.state.furnitures.filter (({ name }) => {
    return name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
  })
}

filterByStyle(searchTerm){

  let searchByStyle = searchTerm;
  let result = this.state.furnitures.filter(({ furniture_style }) =>
  searchByStyle.every(s => furniture_style.includes(s.label)));

  return this.renderResult(result)

}

renderResult = result => {
  if(result){
    return result.map((res) => {        
      return (
        <div>
          <Grid container spacing={3}>
            <Grid item xs={6}>
              <Card>
                <CardContent>
                   <h1>{res.name}</h1>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </div>
      )
    })
  } else {
    return null;
  }
}

render() {
  return (
    <div>
      <TextField
        id="standard-uncontrolled"
        placeholder="Search Furniture"
        onChange={this.onInputChange}
        margin="normal"
      />
      <Grid container spacing={3}>
        <Grid item xs={6}>
            <ReactMultiSelectCheckboxes  onChange={this.onFurnitureStyleChange} options={this.stylesOption} />
        </Grid>
      </Grid>
      {this.renderResult()}
    </div>
    );
  }
}

export default App;

Answer 1

根据renderResult的定义，它需要一个参数result。

但是在渲染中，您在没有{this.renderResult()}数据的情况下调用result。

{this.renderResult()} //no param/result passed

因此，它返回null。

在render（）中调用函数不呈现内容

1 个答案: