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

用JSX Elements填充的数组未呈现/更新

1 个答案: