javascript - 当我的搜索字段为空时，如何呈现没有结果的页面，但在搜索时仍然异步呈现？

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>          
      );
    }
}

这是 codesandbox 上的一个工作示例.