Javascript 在render（）内部调用函数，但不呈现内容

我正在尝试使用react创建这个简单的搜索过滤器应用程序，如果用户在搜索栏中键入内容或选中复选框，结果将根据搜索输入显示在屏幕上，但目前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;

根据renderResult定义，它需要一个param result

但是在render中，调用{this.renderResult}时没有结果数据

---

因此，它返回null。

阅读您的评论后，我才意识到我不需要在渲染中调用renderResult，因为它只在用户输入内容时被调用一次，我尝试删除render中的函数调用，但得到了相同的结果。很抱歉，我可能在这里把标题写错了，但是renderResult返回html以显示在UI上。因此，您需要使用结果数据调用render内部。您是对的，我需要稍微重构代码。谢谢

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