javascript - 如何将对象函数的输出添加到数组

Question

这很难用语言表达，但我想获取存储在对象中的函数的返回值，将该值添加到数组并输出它。我已经完成了所有这些工作，但它再次运行后并没有改变，所以说它输出随机数 678，下次它也会输出相同的数字，依此类推。我在 React 中创建了这个很酷的终端，它获取 key 的命令(如果它存在)并通过返回 jsx 在我的控制台中输出它。

这是我的文件结构...

这是我的 react 代码...(我的格式有问题，here 是下面代码的更好版本)

import React, { Component } from "react";
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import "./Main.css";
import Commands from "../Commands/Commands.js"

class Main extends Component {
    constructor(props){
        super(props);
        this.state = {inputValue: ''}
        this.outputs = ["type 'help' for information about     plunketTheTerminal"];

        this.commands = Commands;

        this.commands.keys = Object.keys(this.commands)
    }
handleSubmit = (event) => {
    if(event.key == "Enter") {
        if( this.state.inputValue != "" ) {
            if( this.commands.keys.includes(this.state.inputValue)) {
                this.outputs.unshift(this.commands[this.state.inputValue]);
            }
            else{
                this.outputs.unshift(`No command '${this.state.inputValue}' found.`)
            }
        }
        document.querySelector(".input-section").value = "";
    }
    this.forceUpdate()
}

handleChange = (e) => {
    this.setState({ inputValue: e.target.value })
}
render() {
    return(
        <div>
            <div className="terminal-header"></div>
            <div className="terminal-body">
                <div className="terminal-contents-wrapper">
                    <div className="output-item-wrapper">
                        {
                            this.outputs.map((output, index) => {
                                return <h1 className="output-item" key={ index }>{output}</h1>;
                            })
                        }
                    </div>
                    <div className="input-section-wrapper">
                        <input type="text" className="input-section" onKeyPress={this.handleSubmit} onChange={this.handleChange}/>
                        <span className="input-section-label">plunketTheTerminal@plunketTheTerminal-H170-D3H:~$</span>
                    </div>
                </div>
            </div>
        </div>
    )
    }
    };

export default Main;

最后我的命令的 JavaScript 文件...(再次是更好的代码 here)

const rand = () => {
   return Math.floor(Math.random() * 1000 ) + 1;
}

const Commands = {
    help: "plunketTheTerminal is a online terminal for fun, it contains lots     of different functions and commands. In fact you can actually SUBMIT YOUR OWN      COMMANDS at our github if you are good with computers :).",
    rand: rand(),
    "rand --info": "Will generate a random number between 1 and 1000",

}
export default Commands

编辑:尝试使用以下任一方法不会返回任何结果。

rand: () => (
    "x"
),

或

rand: () => {
    return "x"
},

这是正在发生的事情的演示......

我输入命令...

我的输出很好...

但从那时起，重复相同的命令将不会生成新的随机数，我将继续重复第一个返回值。

我非常感谢您的帮助，但请记住，我仍在学习 React 和 JavaScript，并且很乐意听到任何建设性的反馈。如果需要，我也会继续更新信息。谢谢!

Answer 1

发现问题所在，我在调用函数时没有加上括号。我不得不将命令文件更改为以下...

const Commands = {
help: "plunketTheTerminal is a online terminal for fun, it contains lots of different functions and commands. In fact you can SUBMIT YOUR OWN COMMANDS at our github if you are good with computers :).",
rand: () => {
    return Math.floor(Math.random() * 1000 ) + 1;
},
//"rand --info": "Will generate a random number between 1 and 1000",

}

我不得不换行

this.outputs.unshift(this.commands[this.state.inputValue]);

到

this.outputs.unshift(this.commands[this.state.inputValue]());

愚蠢的错误，希望这对遇到类似问题的人有所帮助，尽管我认为这不太可能。