javascript - React，打印数组的状态并在按下按钮时更新状态

Question

我需要在按下其中一个按钮时打印日志数组。如何在按下其中一个按钮而不进行多次打印的情况下更新 React 中的状态并将其打印到屏幕上？

这应该用作一种数据日志，很像控制台，但需要在页面上呈现。

到目前为止，其他一切正常，按钮调用将生成结果推送到日志数组的函数。

const desert = [
  { content: "Goblin, Cave Bat, Goblin" },
  { content: "Ahriman" },
  { content: "Desertpede, Desert Sahagin" },
  { content: "Antlion, Antlion, Antlion" },
  { content: "No Encounter" },
  { content: "No Encounter" },
  { content: "No Encounter" }
];

const forest = [
  { content: "Hindlegs, Axebeak, Hindlegs" },
  { content: "Arachne" },
  { content: "Bood Eye, Flan" },
  { content: "Bomb, Bomb, Bomb" },
  { content: "No Encounter" },
  { content: "No Encounter" },
  { content: "No Encounter" }
];

const goblin = [
  { content: "ATK 1" },
  { content: "ATK 2" },
  { content: "ATK 3" },
  { content: "ATK 4" },
  { content: "ATK 5" },
  { content: "ATK 6" },
  { content: "Miss" }
];

const arachne = [
  { content: "ATK 1" },
  { content: "ATK 2" },
  { content: "ATK 3" },
  { content: "ATK 4" },
  { content: "ATK 5" },
  { content: "ATK 6" },
  { content: "Miss" }
];

const log = [];

class DesertGenerator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: ""
    };

    this.desertGeneration = this.desertGeneration.bind(this);
  }

  desertGeneration() {
    let number = Math.floor(Math.random() * desert.length);

    let generation = desert[number].content;

    this.setState({ content: generation });

    log.push(generation);
    console.log(log);
  }

  render() {
    return (
      <DesertButton
        handleDesertGeneration={this.desertGeneration}
        generation={this.state.content}
      />
    );
  }
}

class ForestGenerator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: ""
    };

    this.forestGeneration = this.forestGeneration.bind(this);
  }

  forestGeneration() {
    let number = Math.floor(Math.random() * forest.length);

    let generation = forest[number].content;

    this.setState({ content: generation });

    log.push(generation);
    console.log(log);
  }
  render() {
    return (
      <ForestButton
        handleForestGeneration={this.forestGeneration}
        generation={this.state.content}
      />
    );
  }
}

class GoblinGenerator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: ""
    };

    this.goblinGeneration = this.goblinGeneration.bind(this);
  }

  goblinGeneration() {
    let number = Math.floor(Math.random() * goblin.length);

    let generation = goblin[number].content;

    this.setState({ content: generation });

    log.push(generation);
    console.log(log);
  }

  render() {
    return (
      <GoblinButton
        handleGoblinGeneration={this.goblinGeneration}
        generation={this.state.content}
      />
    );
  }
}

class ArachneGenerator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: ""
    };

    this.arachneGeneration = this.arachneGeneration.bind(this);
  }

  arachneGeneration() {
    let number = Math.floor(Math.random() * arachne.length);

    let generation = arachne[number].content;

    this.setState({ content: generation });

    log.push(generation);
    console.log(log);
  }
  render() {
    return (
      <ArachneButton
        handleArachneGeneration={this.arachneGeneration}
        generation={this.state.content}
      />
    );
  }
}

class DesertButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        type="button"
        id="Desert"
        className="btn"
        onClick={this.props.handleDesertGeneration}
      >
        Desert
      </button>
    );
  }
}

class ForestButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        type="button"
        id="Forest"
        className="btn"
        onClick={this.props.handleForestGeneration}
      >
        Forest
      </button>
    );
  }
}

class GoblinButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        type="button"
        id="Goblin"
        className="btn"
        onClick={this.props.handleGoblinGeneration}
      >
        Goblin
      </button>
    );
  }
}

class ArachneButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        type="button"
        id="Arachne"
        className="btn"
        onClick={this.props.handleArachneGeneration}
      >
        Arachne
      </button>
    );
  }
}

ReactDOM.render(
  <div>
    <DesertGenerator />
    <ForestGenerator />
    <GoblinGenerator />
    <ArachneGenerator />
  </div>,
  document.getElementById("content")
);

Answer 1

我不是 100% 确定您的要求，但我相信这会满足您的要求。

我减少了很多你的组件，因为它们是重复的。我也用过 PropTypes确保 state/prop 声明和使用的一致性(基本上，您不能从 parent 向下传递 string code> 并尝试在 child 中调用它，就好像它是一个 function -- 字符串仍然是字符串，函数仍然是函数，...等等 -- 不管有多少他们被传下来的次数)。

工作示例:https://codesandbox.io/s/qvyw4yv36

组件/Content.js

export const content = {
  desert: [
    "Goblin, Cave Bat, Goblin",
    "Ahriman",
    "Desertpede, Desert Sahagin",
    "Antlion, Antlion, Antlion",
    "No Encounter",
    "No Encounter",
    "No Encounter"
  ],
  forest: [
    "Hindlegs, Axebeak, Hindlegs",
    "Arachne",
    "Bood Eye, Flan",
    "Bomb, Bomb, Bomb",
    "No Encounter",
    "No Encounter",
    "No Encounter"
  ],
  goblin: ["ATK 1", "ATK 2", "ATK 3", "ATK 4", "ATK 5", "ATK 6", "Miss"],
  arachne: ["ATK 1", "ATK 2", "ATK 3", "ATK 4", "ATK 5", "ATK 6", "Miss"]
};

export const contentTypes = ["desert", "forest", "goblin", "arachne"];

export const logTypes = [
  { title: "Generation Log", type: "generation" },
  { title: "Actions Log", type: "actions" },
  { title: "Actions Log (by type)", type: "actionsByType" }
];

组件/App.js

import React, { Component } from "react";
import Generator from "./Generator";
import Logger from "./Logger";
import { content, contentTypes, logTypes } from "./Content";

export default class App extends Component {
  state = {
    generation: {},
    actions: [],
    actionsByType: [],
    count: 0
  };

  logGeneration = (id, generation) =>
    this.setState(prevState => {
      const newCount = prevState.count + 1; // count of action (1, 2, ...etc)
      const nextAction = `action${newCount}`; // string used for action property (action1, action2, ...etc)

      return {
        generation: { ...prevState.generation, [id]: generation }, // spread out previous generation state, add the button's [id] as a property with the selected generation
        actions: {
          ...prevState.actions, // spread out previous actions state
          [nextAction]: generation // add the [nextAction] string as a property with the selected generation
        },
         actionsByType: {
          ...prevState.actionsByType, // spread out previous actionsByType state 
          [id]: { ...prevState.actionsByType[id], [nextAction]: generation } // select id (ex: ["forest"]) and spread out previous actionsByType state, and add a [nextAction] property with the selected generation (ex: "action1": "Miss")
        },
        count: newCount
      };
    });

  render = () => (
    <div className="app">
      {contentTypes.map(type => ( // map over contentTypes 
        <Generator
          key={type} // type as key
          id={type} // type as id
          content={content[type]} // type as a content selector
          logGeneration={this.logGeneration} // pass down logGeneration method
        />
      ))}
      {logTypes.map(({ type, ...props }) => ( // map over logType, pull out type, put the rest in props
        <Logger 
          {...props} // spread and pass down props
          key={type}  // use type as key
          log={this.state[type]} // use type for selection state (ex: this.state["actions"] || this.state.actions)
        />
      ))}
    </div>
  );
}

组件/Generator.js

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import Button from "../Button";

class Generator extends PureComponent {
  handleGeneration = id => {
    const number = Math.floor(Math.random() * this.props.content.length); // grab random number between 0-6 

    const generation = this.props.content[number]; // grab content by index from passed in content array (ex: forest[0-6])

    this.props.logGeneration(id, generation); // pass back id and generation to the log method
  };

  render = () => (
    <Button id={this.props.id} onHandleClick={this.handleGeneration}>
      {this.props.id}
    </Button>
  );
}

export default Generator;

Generator.propTypes = {
  logGeneration: PropTypes.func.isRequired,
  id: PropTypes.string.isRequired,
  content: PropTypes.arrayOf(PropTypes.string).isRequired
};

组件/Button.js

import React from "react";
import PropTypes from "prop-types";

const Button = ({ children, id, onHandleClick }) => (
  <div className="button-container">
    <button
      type="button"
      className="btn btn-primary"
      onClick={() => onHandleClick(id)} // pass back id on button click (ex: "forest")
    >
      {children}
    </button>
  </div>
);

export default Button;

Button.propTypes = {
  children: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  onHandleClick: PropTypes.func.isRequired
};

组件/Logger.js

import isEmpty from "lodash/isEmpty";
import React from "react";
import PropTypes from "prop-types";

const Logger = ({ log, title }) =>
  !isEmpty(log) ? ( // if the log isn't empty...
    <div className="logger-container"> // show log
      <h1 style={{ textAlign: "center " }}>{title}</h1>
      <div className="log">
        <pre>
          <code>{JSON.stringify(log, null, 4)}</code>
        </pre>
      </div>
    </div>
  ) : null; // else show nothing

export default Logger;

Logger.propTypes = {
  log: PropTypes.oneOfType([
    PropTypes.objectOf(PropTypes.string),
    PropTypes.arrayOf(PropTypes.string),
    PropTypes.objectOf(PropTypes.objectOf(PropTypes.string))
  ]),
  title: PropTypes.string.isRequired
};