React组件仅在我的对象中呈现一项

马修

因此,我设置了一个react组件来映射数组中的所有项目以在页面上显示它们。我正在将组件导入到我的主页上,并将对象作为道具从导入的组件传递。但是,当我加载页面时,仅呈现对象中的一项。我不确定我是否正确传递了对象。任何帮助,将不胜感激!代码如下。

这是我的模态组件。我正在通过具有传播运算符的listGroupArray进行映射,而该数据是从主页传递的数据。

export default function ModalButton({ setData, title, arrayData, dataTitle }) {
    
    const [show, setShow] = useState(false);
    const [button, setButton] = useState("Choose...")

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const listGroupArray = [{...arrayData}]

    const changeButton = e => setButton(e)

    return (
        <>
        <h5 className="inputFont text-center">{title}</h5>
        <Button style={{ backgroundColor: "black", opacity: "1", color: "white", borderColor: "red" }} variant="primary" className="w-100 mb-4 inputFont" onClick={handleShow}>
            {button}
        </Button>
        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton className="modal-bg inputFont">
                {dataTitle}
            </Modal.Header>
            <Modal.Body className="modal-bg">
                <ListGroup>
            {listGroupArray.map(item => (
              <ListGroup.Item key={item.id} className="modal-bg">
                <Button
                  style={{
                    backgroundColor: "black",
                    opacity: ".8",
                    color: "white",
                    borderColor: "red",
                  }}
                  className="inputFont w-100"
                  name={item.name}
                  value={item.value}
                  onClick={(e) => {
                    setData(item.value);
                    changeButton(item.name);
                    handleClose();
                  }}
                >
                  {item.name}
                </Button>
              </ListGroup.Item>
            ))}
          </ListGroup>
        </Modal.Body>
      </Modal>
    </>
    );
}

这是我的主页,我将数组数据作为对象传递。我很确定这是我要去的地方。当我加载页面时,组件应呈现对象中的所有数据,但是它仅呈现最后一个数据,即Classics。

                                        <Modal title="Genre" 
                                        dataTitle="Pick A Genre"
                                        setData={setGenrelist}
                                        arrayData={
                                            
                                                {
                                                id: 1,
                                                name: "Action and Adventure",
                                                value: "10673,10702,11804,11828,1192487,1365,1568,2125,2653,43040,43048,4344,46576,7442,75418,76501,77232,788212,801362,899,9584"
                                                },
                                                {
                                                    id: 2,
                                                    name: "Musicals",
                                                    value: "13335,13573,32392,52852,55774,59433,84488,88635"
                                                },
                                                {
                                                    id: 3,
                                                    name: "Sci-Fi",
                                                    value: "1492,108533,11014,1372,1568,1694,2595,2729,3327,3916,47147,4734,49110,50232,52780,52849,5903,6000,6926,852491"
                                                },
                                                {
                                                    id: 4,
                                                    name: "Fantasy",
                                                    value: "9744"
                                                },
                                                {   id: 5,
                                                    name: "Thrillers",
                                                    value: "10306,10499,10504,10719,11014,11140,1138506,1321,1774,3269,43048,46588,5505,58798,65558,6867,75390,78507,799,852488,8933,98911,9147,972"
                                                },
                                                {   
                                                    id:  6,
                                                    name: "Anime",
                                                    value: "10695,11146,2653,2729,3063,413820,452,6721,9302,7424"
                                                },
                                                {
                                                    id: 7,
                                                    name: "Children and Family",
                                                    value: "10056,27480,27950,28034,28083,28233,48586,5455,561,6218,6796,6962,78120,89513,783"
                                                },
                                                {
                                                    id: 8,
                                                    name: "Comedies",
                                                    value: "1009,10256,10375,105,10778,11559,11755,1208951,1333288,1402,1747,17648,2030,2700,31694,3300,34157,3519,3996,4058,4195,43040,4426,4906,52104,52140,52847,5286,5475,5610,56174,58905,59169,61132,61330,6197,63092,63115,6548,711366,7120,72407,7539,77599,77907,78163,78655,79871,7992,852492,869,89585,9302,9434,9702,9736"
                                                },
                                                {
                                                    id: 9,
                                                    name: "Documentaries",
                                                    value: "10005,10105,10599,1159,15456,180,2595,2616,2760,28269,3652,3675,4006,4720,48768,49110,49547,50232,5161,5349,55087,56178,58710,60026,6839,7018,72384,77245,852494,90361,9875"
                                                },
                                                {
                                                    id: 10,
                                                    name: "Dramas",
                                                    value: "11,11075,11714,1208954,1255,12995,13158,2150,25955,26009,2696,2748,2757,2893,29809,3179,31901,34204,3653,3682,384,3916,3947,4282,4425,452,4961,500,5012,52148,52904,56169,58755,58796,59064,6206,62235,6616,6763,68699,6889,711367,71591,71591,72354,7243,7539,75459,76507,78628,852493,89804,9299,9847,9873,5763"
                                                },
                                                {
                                                    id: 11,
                                                    name: "Sports",
                                                    value: "180,25788,4370,5286,7243,9327"
                                                },
                                                {
                                                    id: 12,
                                                    name: "Horror",
                                                    value: "10695,10944,1694,42023,45028,48303,61546,75405,75804,75930,8195,83059,8711,89585"
                                                },
                                                {
                                                    id: 13,
                                                    name: "Romance",
                                                    value: "29281,36103,502675"
                                                },
                                                {
                                                    id: 14,
                                                    name: "Classics",
                                                    value: "10032,11093,13158,29809,2994,31273,31574,31694,32392,46553,46560,46576,46588,47147,47465,48303,48586,48744,76186"
                                                }
                                            
                                            } 
                                
                                        />

主页的屏幕快照此图像显示该组件仅呈现一个数据项,即Classics。关于如何获取所有数据的任何建议将不胜感激!谢谢!

埃里克·麦克温纳

错误在于您如何引用arrayData数组以及在数组上使用的有问题的花括号。在您的JSX代码中,您遇到语法错误,应该将数组括在大括号中,或者最好将它们分隔为自己的变量。

然后,您的JSX应该看起来像这样:

function JSX(props) {
  const arrayData = [
    {
      id: 1,
      name: "Action and Adventure",
      value:
        "10673,10702,11804,11828,1192487,1365,1568,2125,2653,43040,43048,4344,46576,7442,75418,76501,77232,788212,801362,899,9584",
    },
    {
      id: 2,
      name: "Musicals",
      value: "13335,13573,32392,52852,55774,59433,84488,88635",
    },
    {
      id: 3,
      name: "Sci-Fi",
      value:
        "1492,108533,11014,1372,1568,1694,2595,2729,3327,3916,47147,4734,49110,50232,52780,52849,5903,6000,6926,852491",
    },
    {
      id: 4,
      name: "Fantasy",
      value: "9744",
    },
    {
      id: 5,
      name: "Thrillers",
      value:
        "10306,10499,10504,10719,11014,11140,1138506,1321,1774,3269,43048,46588,5505,58798,65558,6867,75390,78507,799,852488,8933,98911,9147,972",
    },
    {
      id: 6,
      name: "Anime",
      value: "10695,11146,2653,2729,3063,413820,452,6721,9302,7424",
    },
    {
      id: 7,
      name: "Children and Family",
      value:
        "10056,27480,27950,28034,28083,28233,48586,5455,561,6218,6796,6962,78120,89513,783",
    },
    {
      id: 8,
      name: "Comedies",
      value:
        "1009,10256,10375,105,10778,11559,11755,1208951,1333288,1402,1747,17648,2030,2700,31694,3300,34157,3519,3996,4058,4195,43040,4426,4906,52104,52140,52847,5286,5475,5610,56174,58905,59169,61132,61330,6197,63092,63115,6548,711366,7120,72407,7539,77599,77907,78163,78655,79871,7992,852492,869,89585,9302,9434,9702,9736",
    },
    {
      id: 9,
      name: "Documentaries",
      value:
        "10005,10105,10599,1159,15456,180,2595,2616,2760,28269,3652,3675,4006,4720,48768,49110,49547,50232,5161,5349,55087,56178,58710,60026,6839,7018,72384,77245,852494,90361,9875",
    },
    {
      id: 10,
      name: "Dramas",
      value:
        "11,11075,11714,1208954,1255,12995,13158,2150,25955,26009,2696,2748,2757,2893,29809,3179,31901,34204,3653,3682,384,3916,3947,4282,4425,452,4961,500,5012,52148,52904,56169,58755,58796,59064,6206,62235,6616,6763,68699,6889,711367,71591,71591,72354,7243,7539,75459,76507,78628,852493,89804,9299,9847,9873,5763",
    },
    {
      id: 11,
      name: "Sports",
      value: "180,25788,4370,5286,7243,9327",
    },
    {
      id: 12,
      name: "Horror",
      value:
        "10695,10944,1694,42023,45028,48303,61546,75405,75804,75930,8195,83059,8711,89585",
    },
    {
      id: 13,
      name: "Romance",
      value: "29281,36103,502675",
    },
    {
      id: 14,
      name: "Classics",
      value:
        "10032,11093,13158,29809,2994,31273,31574,31694,32392,46553,46560,46576,46588,47147,47465,48303,48586,48744,76186",
    },
  ];

  return (
    <Modal
      title="Genre"
      dataTitle="Pick A Genre"
      setData={(data) => console.log(data)}
      arrayData={arrayData}
    />
  );
}

您遇到的下一个错误是使用传播运算符。虽然数组从技术上讲是JavaScript中的对象,但不能使用花括号将它们传播。[{...arrayData}]在语法上是不正确的。相反,它应该是[...arrayData]有了这些之后,您的代码应正确运行。

我在工作状态下将您的代码制成了一个沙箱,以供参考,请在此处查看:

https://codesandbox.io/s/young-snowflake-efqwk?file=/src/ModalButton.js:877-883

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Class vs Functional Component:当使用钩子和功能组件时,我的其中一项功能会不断重新呈现

来自分类Dev

无法在DetailActivity中呈现ListView的下一项

来自分类Dev

当我更改第一项组件时,最后一项会生效

来自分类Dev

我可以只获取游标对象(pymongo)中的第一项吗?

来自分类Dev

如何确定 Python 对象列表中的第一项和最后一项?

来自分类Dev

React Native:更新状态中的一项时,我是否需要`...this.state`

来自分类Dev

AngularJS:嵌套ng-repeat(对象中的数组)仅在数组中有一项时才起作用,而在多个项中则不起作用

来自分类Dev

AngularJS:嵌套ng-repeat(对象中的数组)仅在数组中有一项时才起作用,而在多个项中则不起作用

来自分类Dev

如何获取对象中的最后一项

来自分类Dev

为什么我的for循环仅在第一项上执行?

来自分类Dev

React仅渲染从Firebase下载的列表中的一项

来自分类Dev

如何使用Bootstrap仅在导航栏中的一项中禁用导航丸悬停效果?

来自分类Dev

如何仅在Laravel Blade模板中显示集合中的第一项内容

来自分类Dev

React,Gatsbyjs:在对象中循环-组件未呈现

来自分类Dev

我如何在DOM主体中呈现组件,即使其他一些组件在React中呈现它呢?

来自分类Dev

仅在一项超级测试中连接ECONNREFUSED 127.0.0.1:80错误

来自分类Dev

SQL选择仅在找到数组中的第一项时IN(数组)才返回的地方

来自分类Dev

jquery-输出始终仅在第一项中

来自分类Dev

我可以在Specflow中运行一项测试作为另一项测试吗?

来自分类Dev

我的React应用仅在一个文件中呈现,而在导入到另一个文件时不呈现

来自分类Dev

获取嵌套对象的最后一项

来自分类Dev

Reactstrap分页下一项未呈现

来自分类Dev

Blazor:删除动态创建的组件始终会将列表中的最后一项删除

来自分类Dev

underscore.js-从嵌入对象列表中的对象创建唯一项数组

来自分类Dev

如何仅在毒物中进行一项测试?

来自分类Dev

如何仅在反应中切换一项?

来自分类Dev

使用React从JSON获取一项

来自分类Dev

提前禁用React Bootstrap异步输入中的一项或多项选定项

来自分类Dev

React Ref:对象数组的Ref函数仅记录第一项

Related 相关文章

  1. 1

    React Class vs Functional Component:当使用钩子和功能组件时,我的其中一项功能会不断重新呈现

  2. 2

    无法在DetailActivity中呈现ListView的下一项

  3. 3

    当我更改第一项组件时,最后一项会生效

  4. 4

    我可以只获取游标对象(pymongo)中的第一项吗?

  5. 5

    如何确定 Python 对象列表中的第一项和最后一项?

  6. 6

    React Native:更新状态中的一项时,我是否需要`...this.state`

  7. 7

    AngularJS:嵌套ng-repeat(对象中的数组)仅在数组中有一项时才起作用,而在多个项中则不起作用

  8. 8

    AngularJS:嵌套ng-repeat(对象中的数组)仅在数组中有一项时才起作用,而在多个项中则不起作用

  9. 9

    如何获取对象中的最后一项

  10. 10

    为什么我的for循环仅在第一项上执行?

  11. 11

    React仅渲染从Firebase下载的列表中的一项

  12. 12

    如何使用Bootstrap仅在导航栏中的一项中禁用导航丸悬停效果?

  13. 13

    如何仅在Laravel Blade模板中显示集合中的第一项内容

  14. 14

    React,Gatsbyjs:在对象中循环-组件未呈现

  15. 15

    我如何在DOM主体中呈现组件,即使其他一些组件在React中呈现它呢?

  16. 16

    仅在一项超级测试中连接ECONNREFUSED 127.0.0.1:80错误

  17. 17

    SQL选择仅在找到数组中的第一项时IN(数组)才返回的地方

  18. 18

    jquery-输出始终仅在第一项中

  19. 19

    我可以在Specflow中运行一项测试作为另一项测试吗?

  20. 20

    我的React应用仅在一个文件中呈现,而在导入到另一个文件时不呈现

  21. 21

    获取嵌套对象的最后一项

  22. 22

    Reactstrap分页下一项未呈现

  23. 23

    Blazor:删除动态创建的组件始终会将列表中的最后一项删除

  24. 24

    underscore.js-从嵌入对象列表中的对象创建唯一项数组

  25. 25

    如何仅在毒物中进行一项测试?

  26. 26

    如何仅在反应中切换一项?

  27. 27

    使用React从JSON获取一项

  28. 28

    提前禁用React Bootstrap异步输入中的一项或多项选定项

  29. 29

    React Ref:对象数组的Ref函数仅记录第一项

热门标签

归档