javascript - 数组被 JSX 元素填充而不呈现/更新

Question

这可能是一个快速修复，但过去一段时间我一直在绞尽脑汁，真的可以用另一双眼睛看一看。

基本上我试图渲染一个充满生成的 JSX 元素的数组。我觉得我已经做了一百万次了，但它似乎在这里不起作用。

代码如下:

import React, { Fragment } from 'react'
import css from './Search.scss';

import Header from '../SectionHeader/Header';
import SearchItem from '../SearchItem/SearchItem';

const Search = (props) => {

  const { coinObject, coinKeys } = props;

  let searchResults = [];                              // Array in question

  const findResults = (searchText) => {
    searchResults = [];                                // Reset the array to blank for each new character typed in input
    for(let i = 0; i < coinKeys.length; i++) {         
      const { FullName } = coinObject[coinKeys[i]];    // App specific logic, not important, or the problem here
      if(FullName.toLowerCase().includes(searchText) && (searchResults.length < 5)) {    
        console.log(FullName, searchText);             // Prints the correct Full name based off of the searched text
        searchResults.push(<SearchItem key={i} searchText={FullName} />);
      }
    }
    console.log(searchResults);                        // Prints the updated array with all react elements
  }

  return (
    <Fragment>
      <Header title='Find Coins!' />
      <div className={css.searchContainer}>
        <div className={css.inputContainer}>
          <input onChange={input => findResults(input.target.value)} className={css.searchInput} type='text' placeholder='Start Typing a Coin'/>
        </div>
        { searchResults }
      </div>
    </Fragment>
  );
}

export default Search;

还有 SearchItem 组件，非常简单:

import React from 'react'
import css from './SearchItem.scss';

const SearchItem = (props) => {
  return (
    <div className={css.searchItem}>
      {props.searchText}
    </div>
  )
}

export default SearchItem;

对于一点上下文，这个组件只是获取一个巨大的数据对象，并将显示与输入文本匹配的前 5 个实例。我正在尝试制作其中一种搜索过滤器，当您键入时，它会建议与数据匹配的内容。

数组得到更新，我可以在数组中看到 JSX 对象，它们只是不渲染。我有一种感觉，这是因为数组没有重新渲染？

非常感谢任何帮助。谢谢!

Answer 1

您可以将 Search 组件变成有状态组件，并将 searchResults 存储在您的状态中，以便在它更新时重新呈现您的组件。

示例

class Search extends React.Component {
  state = { searchResults: [] };

  findResults = searchText => {
    const { coinObject, coinKeys } = this.props;
    const searchResults = [];

    for (let i = 0; i < coinKeys.length; i++) {
      const { FullName } = coinObject[coinKeys[i]];
      if (
        FullName.toLowerCase().includes(searchText) &&
        searchResults.length < 5
      ) {
        searchResults.push(FullName);
      }
    }

    this.setState({ searchResults });
  };

  render() {
    return (
      <Fragment>
        <Header title="Find Coins!" />
        <div className={css.searchContainer}>
          <div className={css.inputContainer}>
            <input
              onChange={event => findResults(event.target.value)}
              className={css.searchInput}
              type="text"
              placeholder="Start Typing a Coin"
            />
          </div>
          {this.state.searchResults.map((fullName, i) => (
            <SearchItem key={i} searchText={fullName} />
          ))}
        </div>
      </Fragment>
    );
  }
}