javascript - 将状态对象反应到数字

问题描述

_.times由于返回的对象，我无法正确计算。console.log({template});返回一个对象，{Template: 5}但是当它传递给我_.times时它返回一个数组（0）。如果我在下面的部分手动输入 5 ，它将返回 witharray(5)并在屏幕上显示网格列。

如何使用模板中的值正确填充需要为数字的时间量。我尝试math.floor()了价值和number()似乎不起作用的价值。

问题中的部分。

  console.log({ template });

  const columns = _.times(5, (i) => (
    <Grid.Column key={i}>
      <Image src="https://react.semantic-ui.com/images/wireframe/image.png" />
    </Grid.Column>
  ));

代码

import _ from "lodash";
import React, { useState, useEffect } from "react";
import HeaderBar from "./modules/header";
import "./BandsPageScreen.css";
// import Temp from "../../img/tempphoto.png";
// import Logo from "../../img/logo.png";
import { Dropdown, Grid, GridColumn, Image } from "semantic-ui-react";

const CustomizePhotoScreen = ({ history }) => {
  const [template, setTemplate] = useState(0);

  const options = [
    { key: 1, text: "2 Portrait Photos", value: 2 },
    { key: 2, text: "5 Photos", value: 5 },
  ];

  useEffect(() => {}, [template]);

  const handleSelection = (event, data) => {
    setTemplate(data.value);
  };
  console.log({ template });

  const columns = _.times(5, (i) => (
    <Grid.Column key={i}>
      <Image src="https://react.semantic-ui.com/images/wireframe/image.png" />
    </Grid.Column>
  ));

  const GenerateDropDown = () => {
    return (
      <Dropdown
        placeholder="Select Template"
        selection
        options={options}
        value={template}
        onChange={handleSelection}
      ></Dropdown>
    );
  };

  const GenerateGrid = () => {
    console.log({ columns });
    return <Grid>{columns}</Grid>;
  };
  return (
    <>
      <HeaderBar screen="photoinsert"></HeaderBar>
      <GenerateDropDown />
      <GenerateGrid />
    </>
  );
};

export default CustomizePhotoScreen;

标签： javascriptreactjsecmascript-6semantic-ui-react

javascript - 将状态对象反应到数字

问题描述

解决方案

推荐阅读