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

【问题标题】：React - pass array values from arrow function to another .js fileReact - 将数组值从箭头函数传递到另一个 .js 文件
【发布时间】：2019-11-26 15:56:41
【问题描述】：

我对 React 和开发还很陌生，所以请不要介意这个“简单”的问题。

我有一个文件“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：如果你能像给猿解释一样解释，那将不胜感激^^

【问题讨论】：

标签： arrays reactjs arrow-functions

【解决方案1】：

只需导入数组，为此，请将以下代码粘贴到您想要的文件中：

import {createRandomArray} from './createRandomArrayFile'

其中 createRandomArrayFile 是存储的 .js 文件的名称，您不需要添加扩展名，但可以。

你现在可以叫它{createRandomArray}

【讨论】：

【解决方案2】：

您需要从另一个组件的文件中导入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>}

}

您需要在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;

【讨论】：

【解决方案3】：

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

这是生成我的随机数组的文件，我在其中添加了“返回数组”：

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

【讨论】：

【解决方案4】：

像这样试试。

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;

【讨论】：