当我的搜索字段为空时，如何显示没有结果的页面，但搜索时仍然异步显示？

Question

我正在根据用户键入的内容来渲染一堆按钮。 基本上，用户开始输入内容，每按下一个字母，就会在页面上呈现一组新的按钮，其中obj.content包含要输入的字符串。 一切正常，但我有一个小问题。 当用户首次进入程序时，所有按钮都会呈现到显示所有选项的页面上。 如果不进行任何搜索，我想显示零按钮。

截至目前，正常状态下正在查找''的任何匹配项，搜索到的每个字符串均包含该匹配项，因此每个按钮均呈现到屏幕上。

如果我的搜索字段为空，有没有办法呈现出零个按钮？

我努力了...

const RenderSearchResults = () => {
  <div>
    {renderResults}
  </div>
}


const renderResults = this.props.data.filter(obj => {
  return obj.content.includes(this.state.keyToFind);
 }).map((obj, idx) => {
   return (
      <button name={obj.name} value={this.state.btnToFind} key={idx}>{obj.title}   </button>
 )
});

// FROM THE MAIN COMPONENT RETURN

return (
  <input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
    {this.state.keyToFind !== '' ? <RenderSearchResults /> : console.log("no input")}
)

---

// THIS WORKS BUT STARTS WITH ALL BUTTONS RENDERED OUT
return (
  <input type="text name="keyToFind" placeholder="SEARCH" value={this.state.keyToFind} onChange={this.handleChange.bind(this} /> <br />
  {renderResults}
)

但是，当用户开始键入时，上述方法不会更新。 我可以使搜索/渲染异步工作的唯一方法是，如果我只是将{renderResults}放入主组件返回中，而没有if语句检查搜索字段是否为空。 但是，这导致所有可能的按钮都作为正常状态显示到页面上。

无论如何，什么都没有开始呈现给页面？

Answer 1

我创建了一个小示例，与您描述的类似，但更加简化。 在这里，我正在检查keyToFind是否为空字符串，并直接从执行渲染的方法中返回一个空数组。

class RenderButtons extends React.PureComponent {
    state = {
      keyToFind: ''
    }

    renderResults = () => {
      if (this.state.keyToFind === '') return [];

      const renderResults = ['a', 'b', 'c', 'aa']
          .filter(obj => {
              return obj.indexOf(this.state.keyToFind) >= 0;
          })
          .map((obj, idx) => {
              return (<button name={obj} value={obj} key={idx}>{obj}</button>)
          });

      return renderResults;
    }

    handleChange = (event) => {
      this.setState({ keyToFind: event.target.value });
    }
    render () {
      const renderResults = this.renderResults();
      return (
          <div>
          <input type="text" value={this.state.keyToFind} onChange={this.handleChange} />             
          {renderResults}
        </div>          
      );
    }
}

这是codeandbox上的工作示例。