Question

由于返回的对象，我无法正确计算 _.times。 console.log({template}); 返回一个带有 {Template: 5} 的对象，但是当它被传递到我的 _.times 时，它返回一个数组（0）。如果我在下面的部分中手动输入 5，它将返回 with array(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;

Answer 1

需要从模板中移除 {}。

将状态对象反应为数字

1 个答案: