Question

我第一次学习反应和使用上下文。我正在尝试通过上下文将 state 和 setState 函数传递给所有子组件，但我不断收到错误消息。

这就是我创建上下文的方式：

import {createContext} from 'react'

const Context = createContext({
    wishlist: [],
    setObject: () => {}
  });
  
export default Context

这是我创建 useState 钩子并将上下文传递给子组件的地方：

const [wishList, setwishList] = useState ([])


  return (
    <div className={darkMode === false ? 'lightMode' : 'darkMode'}>

    <Router>

      <Context.Provider value={{wishList, setwishList}} >

        <Header setDarkMode={setDarkMode} darkMode={darkMode} wishListcounter={wishListcounter} productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
        <Switch>
          <Route path='/' exact>
            <Hero darkMode={darkMode} productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
          </Route>

          <Route path='/gallery'>
            <Gallery darkMode={darkMode} productsDataBase={productsDataBase} productsArray={productsArray} setProductsArray={setProductsArray} wishListcounter={wishListcounter} setwishListcounter={setwishListcounter}/>
          </Route>

          <Route path='/item'>
            <Item  />
          </Route>

          <Route path='/wishlist'>
            <Wishlist wishListcounter={wishListcounter} />
          </Route>

          <Route path='/about'>
            <About productsDataBase={productsDataBase} setProductsArray={setProductsArray} />
          </Route>
        </Switch>
        <Footer />

      </Context.Provider>

    </Router>
</div>

); }

这是我使用上下文、读取状态并修改它的地方。

    // Hook used to access wishlist and modify it
const {wishList, setwishList} = useContext(Context)

function handleWishClick (id) {
   
    wishList.includes(id) ? wishList.splice(wishList.indexOf(id), 1) : setwishList(wishList.push(id))
    
    console.log(wishList)
}

我得到的错误是 TypeError: WishList.includes is not a function。并且这只会在状态被修改一次时发生。

我的意思是，handleWishClick 函数运行良好，但是当我再次尝试运行它时，状态不会被识别。

有关如何解决此问题的任何提示？

完整代码可以在这里找到：https://github.com/coccagerman/sweetKicks

提前致谢！

Answer 1

push 方法不会返回新列表。 Docs for list push

当您执行 setwishList(wishList.push(id)) 时，您实际上是将空列表设置为一个数字，因为 push 方法返回列表的长度，然后您将其设置为状态。

因此，当您下次尝试推送它时，它会失败并显示所提到的错误。

相反，您可以执行 setwishList([...wishList, id])

在反应中传递带有上下文的状态

1 个答案: