React - 将数组值从箭头函数传递到另一个 .js 文件

Question

我对 React 和开发完全陌生，所以请不要介意这个 "easy" 问题。

我有一个文件 "CreateRandomArray.js"，它将用小于 10 的随机数填充一个数组，并检查这个数字是否已经存在。

import React from 'react';

const createRandomArray = () => {

const array = [];
let indexer = 0;

do {
    let randomnumber = Math.floor(Math.random()*30)
    if ( randomnumber < 10){
        let result = array.includes(randomnumber)
        console.log(result)
        if (!result) {
            array[indexer] = randomnumber
            indexer = indexer + 1
        } null
    } null
 } while (indexer < 10)
}

export default createRandomArray

现在我很想在另一个文件中使用这个数组，但是我找不到一种方法来访问这个数组中的值。我已经用 "return" 做了几个版本，但都没有用。

那么，有人知道我如何在另一个 .js 文件中使用这个数组并将这些值分配给另一个数组吗？

谢谢:)

ps：如果你能像给猿猴解释一样解释，将不胜感激^^

Answer 1

这样试试。

const getRandomArray = (size, max) => {

  const array = [];
  let index = 0;

  for(index = 0; index < size; index ++) {
    let rand = 0;
    do {
      rand = Math.floor(Math.random() * max);
    } while (array.some((value) => value === rand )) // check array values
    array.push(rand); // then push
  }

  return array;
}

export default getRandomArray;

Answer 2

只需导入数组，为此，通过在顶部粘贴以下代码将其导入到您想要的文件中：

import {createRandomArray} from './createRandomArrayFile'

其中createRandomArrayFile是存储的.js文件的名称，不需要放扩展名，虽然可以。

您现在可以将其命名为 {createRandomArray}

Answer 3

您需要从另一个组件的文件中导入 CreateRandomArray 函数。你可以这样做。

ParentComponent.js

import React from 'react';
import CreateRandomArray from './CreateRandomArray.js`

const ParentComponent = (props)=> {

  const doSomethingWithArray = (CreateRandomArray)=>{
     var arrayValues = CreateRandomArray();
     //do something with arrayValues 
  }

  return (<div>{doSomethingWithArray(CreateRandomArray)</div>}

}

并且您需要一个 return 值在 CreateRandomArray.js

范围内

CreateRandomArray.js

import React from 'react';

const createRandomArray = () => {

const array = [];
let indexer = 0;

do {
    let randomnumber = Math.floor(Math.random()*30)
    if ( randomnumber < 10){
        let result = array.includes(randomnumber)
        console.log(result)
        if (!result) {
            array[indexer] = randomnumber
            indexer = indexer + 1
        } null
    } null
 } while (indexer < 10)
  return array
}

export default createRandomArray;

Answer 4

感谢您的反馈。在一位同事的帮助下，我找到了一个不同的解决方案，由于它的简单性，post 有点尴尬:)

这是生成我的随机数组的文件，我在其中添加了 "return array":

import React from 'react';

const createRandomArray = () => {

const array = [];
let indexer = 0;

do {
    let randomnumber = Math.floor(Math.random()*30)
    if ( randomnumber < 10){
        let result = array.includes(randomnumber)
        console.log(result)
        if (!result) {
            array[indexer] = randomnumber
            indexer = indexer + 1
        } null
    } null
} while (indexer < 10)

return array
}

export default createRandomArray;

在我的 App.js 文件中，我导入了另一个文件并将我的变量设置为等于该函数。

import React, { Component } from 'react';
import CreateRandomArray from './CreateRandomArray';

class app extends Component {

whatever = CreateRandomArray();


render() {  

    return (
        <div>{this.whatever}</div>
    )

  }
}

export default app

React - 将数组值从箭头函数传递到另一个 .js 文件

React - pass array values from arrow function to another .js file

arrays

reactjs

arrow-functions