為什么 onclick 函數沒有呈現（React.js）？

Question

我正在用 React 構建一個電子商務網站。 其中，將有一個包含所有類別的導航欄，一旦用戶單擊特定類別，它將在同一頁面中呈現屬於選中類別的所有產品。 在項目中，我有兩個.js文件，它們是NavBar.js ，其中包含導航欄的所有內容，以及AllItems.js所有產品的AllItems.js 。

我現在的問題是NavBar.js中的onclick不呈現AllItems.js 。 它適用於console.log("sss")但它不適用於<AllItems/>

這是我在NavBar.js代碼

function NavBar() {


    const [allCategories, setAllCategories] = useState([])
    const [currency, setCurrency] = useState([])
    

    useEffect(() => {

        fetchAnyQuery(
            `
            query{
                categories{
                name
                }
            }
        `).then(data => {
            setAllCategories( data.data.categories )
        })
    },[])

    // for currency options
    useEffect(() => {

        fetchAnyQuery(`
            query{
              currencies
            }
        `
        ).then(data => {
            setCurrency(data.data.currencies)
        })
    },[])


    return (
        <nav id = "NavBar">
            <div id="NavBar-content">

                <div className = "leftSide" id = "leftNav">

                    {allCategories.map((allCategories, index) => {

                        if (index == 0){
                            // return a checked tab

                            return(
                                <>
                                    <input className='radio-category' id={allCategories.name} type='radio' name="nav" onClick={
                                        function (){
                                            console.log("ssss");
                                            <AllItems/>

                                        }

                                    } checked/>
                                    <label htmlFor={allCategories.name} className='category-label'><h5 className="tab-text">{allCategories.name.toUpperCase()}</h5></label>
                                </>
                            )

                        }
                        else {
                            // return unchecked tab

                            return(
                                <>
                                    <input className='radio-category' id={allCategories.name} type='radio' name="nav" onClick={ function (){changeCategoryState(allCategories.name); <AllItems/>} } />
                                    <label htmlFor={allCategories.name} className='category-label'><h5 className="tab-text">{allCategories.name.toUpperCase()}</h5></label>
                                </>
                            )
                        }

                    })}
                </div>

                <div className = "centerSide">
                    {/*<a href="/">*/}
                    {/*    /!*<img src={logo} />*!/*/}
                    {/*    Logo*/}
                    {/*</a>*/}

                    <button onClick={function (){ console.log(getCategoryState()) }}>
                        Abo Kalb
                    </button>
                </div>

                <div className = "rightSide">

                    <select className="currencySelector" id="currencySelector">

                        {currency.map((currency, index) =>{

                            return(
                                <option value={ JSON.stringify(currency.indexOf(index)) }  >   {getSymbolFromCurrency(currency.toString()) + " " + currency.toString()} </option>

                            )
                        })}
                    </select>
                </div>
            </div>
        </nav>
    );
}

export default NavBar;

另外，這是我的AllItems.js文件代碼：

function AllItems() {

    // The state that I want to use in NavBar.js
    // const [category, setCategory] = useState([getCategoryState()])
    const [products, setProducts] = useState([])



    useEffect(() => {

        fetchAnyQuery(
            `
                query{
                    categories{
                        name
                        products{
                            name
                            id
                        }
                    }
                }
        `
        ).then(data => {

            // Here I'm trying to do all  the required stuff

           // console.log(category)

        })


    },[])


    console.log("All Items RENDERED!!")

    return (
        <>

            <h1>{ getCategoryState() }</h1>

            <div className="itemContainer" id="itemContainer">

            </div>

        </>

    )
}

export default AllItems;

Answer 1

據我了解，您希望根據點擊的類別呈現不同類別的數據，但您無法在點擊時調用組件，這不是 React 的工作方式。 而是設置一個狀態並根據狀態值有條件地渲染組件，並在組件需要渲染時設置狀態。

假設您從服務器獲取您的項目，您將不得不將該數據存儲在一個狀態

const [allItems, setAllTems] = useState([])

然后添加一個狀態來幫助您有條件地呈現您的項目

const [showAllItems, setShowAllItems] = useState(false)

在您的 JSX 中，當狀態獲取所有數據時，使用 && 來呈現您的數據

<> {showAllItems && <AllItems>} </>

如果您在理解它的工作原理時遇到困難，我建議您查看React 文檔，它很好地解釋了如何操作狀態

Answer 2

使用父組件來管理狀態。 當您更新Nav的無線電輸入時，更新狀態，然后根據該選擇過濾數據。

 const { useState } = React; function Example({ data }) { const [ items, setItems ] = useState(data); const [ selection, setSelection ] = useState(''); // When you click a button, set the selection state function handleClick(e) { setSelection(e.target.dataset.type); } // `filter` out the items you want to display // based on the selection function filteredItems() { return items.filter(item => item.type === selection); } return ( <div> <Nav> Dairy: <input onClick={handleClick} type="radio" data-type="dairy" name="food" /> Meat: <input onClick={handleClick} type="radio" data-type="meat" name="food" /> Vegetable: <input onClick={handleClick} type="radio" data-type="vegetable" name="food" /> </Nav> <Items items={filteredItems()} /> </div> ); }; // `map` over the filtered data function Items({ items }) { return items.map(item => <div>{item.name}</div>); } function Nav({ children }) { return children; } const data = [ { name: 'cow', type: 'meat' }, { name: 'bree', type: 'dairy' }, { name: 'chicken', type: 'meat' }, { name: 'sprout', type: 'vegetable' } ]; ReactDOM.render( <Example data={data} />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>