react-redux 应用程序问题-尝试将映射的数组数据从父级传递给子级答案

【问题标题】：react-redux app issue - trying to pass mapped array data from parent to childreact-redux 应用程序问题-尝试将映射的数组数据从父级传递给子级
【发布时间】：2021-06-18 01:46:33
【问题描述】：

大家好，我正在尝试使用 redux 工具包创建一个反应应用程序，它具有添加到购物车的功能当我尝试将道具传递给父组件到子组件时，我遇到了以下问题，请检查是否可以

我在控制台中收到以下错误

控制台中的错误信息 -- 'add' is not defined

父反应组件

import React, { useState, useEffect } from "react";

import { useDispatch, useSelector } from "react-redux";
import { selectAddSlice } from "./features/auth/addsSlice";

import Cardshild from './Cardshild'
const Addtocart = (props) => {

 

  return (
    <div>
      {selectedAdds.map((add, i) => (
        <Cardshild key={i} allprops={add.allprops} />
      ))}
    </div>
  );
};

export default Addtocart;

子反应组件

import React from 'react'

const Cardshild = ({id, addname, price, quantity}) => {
    return (
        <div>
            
            <div key={add.id}>
              <div> {add.addname}</div>
              <div> {add.price}</div>
             
              <button onClick={(e) =>{  e.preventDefault(); add.quantity++ }}>+</button>
              <div> {add.quantity}</div>
              <button onClick={(e) =>{  e.preventDefault(); add.quantity-- }}>-</button>
            </div>
        </div>
    )
}

export default Cardshild

下面是 json 数据，这个数据在 redcux 中，我想要做的是点击递增或递减按钮尝试更新数量时

[ { “添加名称”：“正常添加”， “价格”：“23”， “id”：“1”， “数量”：0 }, { "addname": "advancedadd", “价格”：“50”， “id”：“2”， “数量”：0 }, { "addname": "premiumadd", “价格”：“100”， “id”：“3”， “数量”：0 }

]

【问题讨论】：

标签： reactjs redux ecmascript-6 react-redux redux-toolkit

【解决方案1】：

什么问题？
您不能只显示代码并问我有问题，请为我解决。
下次如果您需要帮助，您应该更加具体。
我不知道这个问题，所以我只是更正了代码：
在父级中

{selectedAdds.map((add, i) => (
    <Cardshild key={i} allprops={add} />
  ))}

在孩子身上

<div key={id}>
   <div> {addname}</div>
   <div> {price}</div>           
   <button onClick={(e) =>{  e.preventDefault(); quantity++ }}>+</button>
   <div> {quantity}</div>
   <button onClick={(e) =>{  e.preventDefault(); quantity-- }}>-</button>
</div>

【讨论】：

我是新来的，下次更新不好，我编辑问题可以吗？
是的，当然。描述您的问题或发布控制台窗口的图像或任何可以帮助我们了解您的问题的内容。

【解决方案2】：

我之前试图从父级到子级获取数据并且显示错误消息。

现在我更新了代码并解决了问题

下面是我的反应组件

import React, { useState, useEffect } from "react";

import { useDispatch, useSelector } from "react-redux";
import { selectAddSlice } from "./features/auth/addsSlice";

import Cardshild from './Cardshild'
const Addtocart = (props) => {

  return (
    <div>
      {selectedAdds.map((add, i) => (
        <Cardshild key={i} add={add} />
      ))}
    </div>
  );
};

export default Addtocart;

下面是我的子组件

import React, {useState} from 'react'

const Cardshild = ({add}) => {

    const [amount, setamount] = useState(add.quantity)

    return (
        <div>
            
            <div key={add.id}>
              <div> {add.addname}</div>
              <div> {add.price}</div>
             
              <button onClick={(e) =>{  e.preventDefault(); setamount(amount + 1) }}>+</button>
              <div> {amount}</div>
              <button onClick={(e) =>{  e.preventDefault(); if(amount > 0){
                  setamount(amount - 1)
              }}}>-</button>
            </div>
        </div>
    )
}

export default Cardshild

【讨论】：