在 React 中使用 Hooks 导出数组

Question

我正在尝试导出我在函数中生成的数组，以便我可以在我的主要组件中使用它。我有以下代码：-

子组件：-

import { useState, useEffect } from 'react';

const DeckFootball = () => {
    const [ fullDeck, setFullDeck ] = useState([])

    useEffect(() => {
        generateDeck()
    }, [deck])

    const deck = []
    const deckLimits = {
        joker: 4,
        goalkeepers: 12,
        defenders: 12,
        midfielders: 12,
        attackers: 12,
      }

      const generateDeck = () => {
        for (let i = 0; i < deckLimits.joker; i++) {
          generateCard("joker")
        }
        for (let i = 0; i < deckLimits.goalkeepers; i++) {
          generateCard("goalkeeper")
        }
        for (let i = 0; i < deckLimits.defenders; i++) {
          generateCard("defender")
        }
        for (let i = 0; i < deckLimits.midfielders; i++) {
          generateCard("midfielder")
        }
        for (let i = 0; i < deckLimits.attackers; i++) {
          generateCard("attacker")
        }
        setFullDeck(deck);
      }
    
      const generateCard = item => {        
        const card = {...}
    
        //add this card to the deck
        deck.push(card)
      }      
    
    return [fullDeck];

}

export default DeckFootball;

然后在我的主要组件中，我正在执行以下操作：-

主要组件：-

import {fullDeck} from '../../decks/football/deck_football';

当我console.log(fullDeck)这是undefined

我的语法有误吗？好像没有调用子组件。

我也试过了

import DeckFootball, {fullDeck} from '../../decks/football/deck_football';

然后是 console.log(DeckFootball.fullDeck) 但这也是未定义的。

非常感谢任何帮助！

谢谢

Answer 1

我认为这里有些混乱。您正在导出的内容具有组件的语法，您提到它是一个挂钩（它的名称应以 use 开头才能成为一个挂钩）并且我相信您正在渲染一些静态数据。如果你是这种情况，一个简单的 javascript 函数就可以解决问题，你在这里不需要任何与 React 相关的东西

export const buildDeck = () => {
  const deck = []
  const deckLimits = {
    joker: 4,
    goalkeepers: 12,
    defenders: 12,
    midfielders: 12,
    attackers: 12,
  }
  const generateCard = item => {        
    const card = {...}

    //add this card to the deck
    deck.push(card)
  }      
  

  for (let i = 0; i < deckLimits.joker; i++) {
    generateCard("joker")
  }
  for (let i = 0; i < deckLimits.goalkeepers; i++) {
    generateCard("goalkeeper")
  }
  for (let i = 0; i < deckLimits.defenders; i++) {
    generateCard("defender")
  }
  for (let i = 0; i < deckLimits.midfielders; i++) {
    generateCard("midfielder")
  }
  for (let i = 0; i < deckLimits.attackers; i++) {
    generateCard("attacker")
  }
  
    
  return fullDeck;
}

您不需要 React 组件，因为您没有做任何 UI 相关的事情。

你当前的代码不需要任何状态或效果，因为在你的应用程序的生命周期中没有什么需要反应或更新的 - 所以你也不需要它是一个钩子

你可以像这样导入这个函数

import { buildDeck } from 'the/path'

其中（并且您将在每个渲染中引用相同的结果 - 这很有意义，因为它看起来像是静态数据）

例如

const Mycomponent = () => {
  // inside render - it will be build on every render. You might be ok or not with that
  const fullDeck = buildDeck()
}

或

// outside render - it will be build just once
const fullDeck = buildDeck()
const Mycomponent = () => {
  //  you can log it on every render, but it will be referencing the exact reference of the same deck on every render
  console.log(fullDeck)
}

在 React 中使用 Hooks 导出数组

export array with Hooks in React

javascript

reactjs

react-hooks

react-functional-component