时间戳

首页 > 解决方案 > 在 React 中使用 Hooks 导出数组

javascript - 在 React 中使用 Hooks 导出数组

问题描述

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

子组件：-

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)，但这也是未定义的。

任何帮助将不胜感激！

谢谢

标签： javascriptreactjsreact-hooksreact-functional-component

解决方案

我认为这里有一个混乱。您要导出的内容具有组件的语法，您提到它是一个钩子（它的名称应该以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)
}

推荐阅读