UseState() 拋出白屏 React

Question

我正在制作一個反應代碼，它應該從 cardInfo 中獲取每個值並將其放入卡片中，並且能夠搜索和過濾每張卡片，這工作正常，過濾器也很好。 盡管當我使用 const [searchTerm, setSearchTerm] = useState(''); 添加輸入時我最終得到一個白屏。

 import React from "react"; import { useState } from "react/cjs/react.production.min"; import '../css/productFilters.css'; function ProductsFilter(){ const cardInfo=[ {image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz3fIWD8EQsvcN8vjqj3RBFXOt0Ybr1C5v5g&usqp=CAU",title:"Lebron James",text:"The worst"}, {image:"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iRvzLV4Dj3Y4/v0/1200x-1.jpg",title:"James Harden",text:"Meh"}, {image:"https://i.insider.com/5a0dc09a3dbef484008b67e7?width=1000&format=jpeg",title:"Speph Curry",text:"Good"}, {image:"https://depor.com/resizer/Wtf5Y1e8fWd5zRd3Do6yRgV58Fg=/580x330/smart/filters:format(jpeg):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/elcomercio/IKJYQ4ZQ7RFWZFE57TNEBKD5SQ.jpg",title:"Michael Jordan",text:"GOAT"}, ] const renderCard=(card,index)=>{ return( <ul className="card"> <li><img src={card.image}></img></li> <li><p className="tittle-card">{card.title}</p></li> <li><p className="text-card">{card.text}</p></li> </ul> ) } const [searchTerm, setSearchTerm] = useState(''); return ( <div> <input type="text" placeholder="Search..." onChange={ (event) => setSearchTerm(event.target.value)} /> <div className="container"> {cardInfo.filter((val)=>{ if (searchTerm==""){ return val } else if (val.title.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())){ return val } }).map(renderCard)} </div> </div> ) } export default ProductsFilter

Answer 1

感謝 Prograk:

您錯誤地導入了 useState。 嘗試從 react ie 中導入 useState。 import React, {useState } from "react" – prograk

代碼現在可以工作了！ 我留下答案

import React, { useState } from "react";
import { Link } from "react-router-dom";
import '../css/productFilters.css';

function ProductsFilter(){
    const cardInfo=[
        {image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz3fIWD8EQsvcN8vjqj3RBFXOt0Ybr1C5v5g&usqp=CAU",title:"Lebron James",text:"The worst"},
        {image:"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iRvzLV4Dj3Y4/v0/1200x-1.jpg",title:"James Harden",text:"Meh"},
        {image:"https://i.insider.com/5a0dc09a3dbef484008b67e7?width=1000&format=jpeg",title:"Speph Curry",text:"Good"},
        {image:"https://depor.com/resizer/Wtf5Y1e8fWd5zRd3Do6yRgV58Fg=/580x330/smart/filters:format(jpeg):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/elcomercio/IKJYQ4ZQ7RFWZFE57TNEBKD5SQ.jpg",title:"Michael Jordan",text:"GOAT"},
    ]
    const renderCard=(card,index)=>{
        return(
            <ul className="card">
                <li><img src={card.image}></img></li>
                <li><p className="tittle-card">{card.title}</p></li>
                <li><p className="text-card">{card.text}</p></li>
            </ul>
        )
    }
    
    const [searchTerm, setSearchTerm] = useState('');

    return (
        <div>
            <input
                type="text"
                placeholder="Search..."
                onChange={ (event) => setSearchTerm(event.target.value)}
            />
            <div className="container">
                {cardInfo.filter((val)=>{
                    if (searchTerm==""){
                        return val
                    }

                    else if (val.title.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())){
                        return val
                    }
                }).map(renderCard)}
            </div>
        </div>
        )
}
export default ProductsFilter