钩子根本不在 React 中呈现

Question

我正在建立一个电子商务网站。现在，我正在创建具有可用类别名称的导航栏，一旦选中（单击）一个类别。特定类别中列出的所有项目都将呈现在同一页面中。现在，我正在努力呈现产品的名称。这是我的每个部分的代码，它们是导航栏、所有项目页面、项目卡片。

function NavBar() {



// To fill the tabs for the navigation bar
useEffect(() => {

    fetchQuery(`
    query{
        categories{
        name
        }
    }
    `).then(data => {

    var count = 1

    data.data.categories.forEach(categories=> {

        //                     <input className='radio-category' id='all' type='radio' name="nav"/>
        //                     <label for='all' className='category-label'>  <h3 className="tab-text">ALL</h3> </label>

        const input = document.createElement('input')
        input.className = 'radio-category'
        input.id = categories.name
        input.type = 'radio'
        input.name = 'nav-categories'
        // input.onclick = function (){
        //     console.log(input.checked, input.id)
        //     AllItems()
        // }
        input.href = '/'


        const label = document.createElement('label')
        label.htmlFor = categories.name
        label.className = 'category-label'


        const categoryLabelText = document.createElement('h5')
        categoryLabelText.className = 'tab-text'
        categoryLabelText.innerHTML = categories.name.toUpperCase()

        // put categoryLabelText inside label
        label.append(categoryLabelText)

        // render all elements to the nav bar
        document.getElementById("leftNav").append(input)
        document.getElementById("leftNav").append(label)

        // check the first element always
        if (count == 1){
            input.checked = true
            label.checked = true
        }

        count += 1

    })


    })
})

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

    fetchQuery(`
        query{
          currencies
        }
`).then(data => {

        const selectBox = document.getElementById("currencySelector")

        data.data.currencies.forEach(currencies=>{

            const option = document.createElement('option')
            option.value = currencies
            option.innerText = getSymbolFromCurrency(currencies) + currencies
            selectBox.append(option)

        })

    })
})


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

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

                {/*<input className='radio-category' id='all' type='radio' name="nav"/>*/}
                {/*<label for='all' className='category-label'>  <h3 className="tab-text">ALL</h3> </label>*/}


            </div>

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

            <div className = "rightSide">

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

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

export default NavBar;

所有项目页面，这是所有项目的容器

    function AllItems(category) {

    // useEffect(() => {
    //
    //
    // },[])

    fetchQuery(`
            query{
            category{
                products{
                  name
                  id
                  category
                }
              }
            }
    `).then(data => {

        // console.log(data.data)
        data.data.category.products.forEach(products => {

            // console.log(products.name)

            if ( document.getElementById(products.category).checked ){

                <ItemCard itemName={products.name} id={products.id}/>
            }



        })

    })

    return (
        <div className="itemCard" id="itemCard">

        </div>
    )
}

export default AllItems;

物品卡容器

    function ItemCard({itemName, id}) {

    return (
      <>
          <a href='/${id}'>
              <h6 id="item-name">
                  {itemName}
              </h6>
          </a>

      </>
    );
}

export default ItemCard;

我不知道为什么对我不起作用。是不是缺少什么功能之类的？请告诉我。

Answer 1

为了扩展我的评论，这里有一个你可以做的人为版本：

function MyComponent({ checkedCategories }) {
  const [products, setProducts] = useState([])

  useEffect(() => {
    myFetchFunction()
      .then(data => {
        setProducts(data.products)
      })
  }, [])

  const productsToDisplay = products.filter(
    product => checkedCategories.includes(product.category)
  )

  return (
    <div>
      {productsToDisplay.map(product => (
        <SomeProductComponent key={product.id} product={product} />
      ))} 
    </div>
  )
}

最好将数据获取、状态设置、转换数据和呈现分开，以便更清楚地了解您在组件中的意图。我希望它足够抽象，可以为您的所有页面提供一些内容。

钩子根本不在 React 中呈现

Hooks are not rendering in React at all

html

javascript

jsx

reactjs