Hooks 根本没有在 React 中呈现答案

【问题标题】：Hooks are not rendering in React at allHooks 根本没有在 React 中呈现
【发布时间】：2021-12-17 20:03:28
【问题描述】：

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

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;

我不知道为什么对我不起作用。有没有缺少的功能或什么？请告诉我。

【问题讨论】：

在 react 中你很少需要使用像 createElement 这样的 DOM 方法。我建议使用 useEffect/fetchQuery 调用将数据保存在 useState 挂钩中，然后使用该状态在返回中呈现所需的元素
另外，如果你确实想要访问 DOM，应该避免使用 getElementById，而使用 useRef 是首选方式。 reactjs.org/docs/refs-and-the-dom.html
@seedBoot 我知道createElement 在反应中不是一个好主意，但是是什么让我的代码不起作用？
@AsemShaath 在您的导航栏组件中，创建的元素不会被附加到 DOM。在 allItems 函数中，fetchQuery 不能用于呈现 JSX。同样， forEach 也不会返回值。正如我之前所写，您将希望使用useState 挂钩来存储从 fetchQuery 获取的数据

标签： javascript html reactjs jsx

【解决方案1】：

为了扩展我的 cmets，这里是你可以做的一个人为的版本：

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>
  )
}

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

【讨论】：