[英]Why onclick function isn't rendering (React.js)?
我正在用 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;
据我了解,您希望根据点击的类别呈现不同类别的数据,但您无法在点击时调用组件,这不是 React 的工作方式。 而是设置一个状态并根据状态值有条件地渲染组件,并在组件需要渲染时设置状态。
假设您从服务器获取您的项目,您将不得不将该数据存储在一个状态
const [allItems, setAllTems] = useState([])
然后添加一个状态来帮助您有条件地呈现您的项目
const [showAllItems, setShowAllItems] = useState(false)
在您的 JSX 中,当状态获取所有数据时,使用 && 来呈现您的数据
<> {showAllItems && <AllItems>} </>
如果您在理解它的工作原理时遇到困难,我建议您查看React 文档,它很好地解释了如何操作状态
使用父组件来管理状态。 当您更新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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.