如何在页面加载时显示所有元素（当前正在过滤掉）- React

Question

我有一个页面显示图像网格，其中包含标题、描述、作者和一些其他附加信息，这些信息均来自我的 SQL table（数据为 marketplaceData).

我为页面构建了一个搜索栏来过滤图像网格，效果很好。我一开始打字，过滤后的图像就会显示出来。当我退格直到我的输入值为 "" 时，网格中的所有图像都会显示。

我的问题是在页面加载时（或当我刷新时），网格是空的并且所有图像都被过滤掉了。我需要 change/add 做什么才能确保不过滤完整的图像网格？非常感谢。

const MarketplaceGrid = ({ classes }) => {

  const marketplaceData = useSelector(
      (state) => state.marketplace.marketplaceData
    );

  const [search, setSearch] = useState("");
  
  const [filteredResults, setFilteredResults] = useState(marketplaceData);


  const handleChange = (event) => {
    console.log("hi from onChange", event.target.value)
    setSearch(event.target.value);
    if (event.target.value !== "") {
       setFilteredResults(marketplaceData.filter(item => item.alg_name.toLowerCase().includes(event.target.value.toLowerCase()) || 
       item.alg_description.toLowerCase().includes(event.target.value.toLowerCase()) ||
       item.author.toLowerCase().includes(event.target.value.toLowerCase()) ||
       item.alg_type.toLowerCase().includes(event.target.value.toLowerCase())
       ))
      }
    else {
      setFilteredResults(marketplaceData)
    }
    };
    
    return (
      <main className={classes.content} >

      <div>{JSON.stringify(marketplaceData["alg_name"])}</div>

      <div className={classes}>
            <div className={classes}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder="Search by Model Name"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'search' }}
              onChange={handleChange}
              value={search}
            />
          </div>

        <GridContainer>
          {filteredResults.map((marketplace, i) => (
            <GridItem xs={1} sm={2} md={3} key={i}>
              <MarketplaceCard {...marketplace} classes={classes} alg_classes={marketplace.classes}
                //pass down all properties of marketplace as props
              />
            </GridItem>
          ))}
       
        </GridContainer>
        </main>
    );
  };
  
  export default MarketplaceGrid;

Answer 1

您应该将您的过滤器逻辑移动到具有搜索依赖项的 useEffect 中。

然后，只需在 handleChange 方法中设置搜索即可。

这样您的 handleChange 只会更新搜索，这会导致过滤结果的副作用。此外，此效果将在组件首次加载时运行。

  const marketplaceData = useSelector(
    (state) => state.marketplace.marketplaceData
  );

  const [search, setSearch] = useState("");
  const [filteredResults, setFilteredResults] = useState(marketplaceData);

  const handleChange = (event) => {
    console.log("hi from onChange", event.target.value);
    setSearch(event.target.value);
  };

  useEffect(() => {
    if (search !== "") {
      setFilteredResults(
        marketplaceData.filter(
          (item) =>
            item.alg_name
              .toLowerCase()
              .includes(search.toLowerCase()) ||
            item.alg_description
              .toLowerCase()
              .includes(search.toLowerCase()) ||
            item.author
              .toLowerCase()
              .includes(search.toLowerCase()) ||
            item.alg_type
              .toLowerCase()
              .includes(search.toLowerCase())
        )
      );
    } else {
      setFilteredResults(marketplaceData);
    }
  }, [search, setFilteredResults, marketplaceData]);

如何在页面加载时显示所有元素（当前正在过滤掉）- React

How to show all elements on page load (currently being filtered out) - React

javascript

reactjs

onchange