更新 React 中的嵌套数组 Object 数组 State

Question

我正在尝试使用 useState 在反应中更新产品 onClick 事件的数量，我正在更新的数据是嵌套数组对象数组

下面是我想从中更新数量的嵌套数据示例

let categoriesInfo = [
        {
            catid: 'category-1',
            catName: 'Fun Stuff',
            product: [
                {
                    id : 1,
                    name: 'candy',
                    qty: 0,
                },
                {
                    id : 2,
                    name: 'cookie',
                    qty: 0,
                }
            ]
         },
         {
            catid: 'category-2',
            catName: 'Fun Stuff2',
            product: [
                {
                    id : 1,
                    name: 'candy2',
                    qty: 0,
                },
                {
                    id : 2,
                    name: 'cookie2',
                    qty: 0,
                }
            ]
        }
    ]

我正在使用 useState

const [productData, setProductData] = useState(categoriesInfo);

我正在从 function x 中的其他组件获取点击按钮上的 id 和 catid

const x = (data) =>{

        console.log(productData)
        const y = productData.map(obj => {
            if (obj.catid == data.catid && obj.product[1-data.prodid].id == data.prodid) {
                console.log(obj.product[1-data.prodid].name)
                return {...obj.product[1-data.prodid], qty : 2}; //something like this 
            }
            return obj;
        });
        setProductData(y);
    }

Answer 1

代码看起来很接近，这个呢？

        const y = productData.map(obj => {
            // you're not interested, just return obj
            if (obj.catid !== data.catid) return obj;

            // you are interested, return a new object
            return {
               ...obj,
               // iterate over it's products and update the one you want
               product: obj.product.map(product => {
                  if(product.id !== data.prodid) return product
                  return { ...product, qty: 2}
               })
            }
        });

Answer 2

尝试如下：

 let categoriesInfo = [ { catid: "category-1", catName: "Fun Stuff", product: [ { id: 1, name: "candy", qty: 0 }, { id: 2, name: "cookie", qty: 0 } ] }, { catid: "category-2", catName: "Fun Stuff2", product: [ { id: 1, name: "candy2", qty: 0 }, { id: 2, name: "cookie2", qty: 0 } ] } ]; function App() { const [productData, setProductData] = React.useState(categoriesInfo); const x = (data) => { setProductData((prevProductData) => prevProductData.map((item) => item.catid === data.catid? {...item, product: item.product.map((product) => product.id === data.prodid? {...product, qty: data.qty }: product ) }: item ) ); }; return ( <div> <button onClick={() => x({ catid: "category-2", prodid: 2, qty: 4 })}> Update value </button> <div>{JSON.stringify(productData, null, 4)}</div> </div> ); } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>