获取的对象 returns 未定义

Question

我有需要获取的数据对象，如下所示：

const products = {
        one: {
            id: 1,
            name: 'One',
            image: oneImage,
            chair: {
                name: 'ChairName',
                image: myImage,
                colors: {
                    white: {
                        name: 'White',
                        image: myImage,
                    },
                    black: {
                        name: 'Black',
                        image: myImage,
                    },
                },
            },            
            },
        },
        two: {
            id: 2,
            name: 'Two',
            image: twoImage,
            chair: {
                name: 'Chair,
                image: myImage,
                colors: {
                    white: {
                        name: 'White',
                        image: myImage,
                    },
                    black: {
                        name: 'Black',
                        image: myImage,
                    },
                },
            },
        },
    };

我正在用 Object.value

获取它们

const ProductsData = Object.values(products).map((data) => {

    return (
        <>
            <div className="box" onClick={() => setSelectedData(data)}>
                 <img src={data.image} />
            </div>
           );
});

上面的代码工作得很好，指向选定的数据如下：

           {selectedData ? (
              <h1>{selectedData.name}</h1>
           ) : null}

但现在我想通过所选数据的椅子颜色进行映射，这会导致错误。

我试图做的只是 {selectedData.chair.colors.name}，什么都不打印，console.log 是 underfined

如何打印椅子颜色的 selectedData 以及如何将选取的颜色设置为新的 selectedData？我迷路了。

Answer 1

你没有selectedData.chair.colors.name，再看看你的结构。有selectedData.chair.colors.white.name或selectedData.chair.colors.black.name

Answer 2

colors又是一个对象。它没有属性 name。它具有 white 和 black 等属性，这些属性本身就是对象。

地图通过：

Object.values(selectedData.chair.colors)

let selectedChairColors = Object.values(selectedData.chair.colors)
;
console.log(selectedChairColors[0])
console.log(selectedChairColors[1])

您可以登录 selectedChairColors 以查看这将为您提供一组颜色值属性 in chair of selectedData。

查看您的沙箱，似乎您在运行 selectedData 时没有使用检查，因此出现错误。（最初，selectedData 未定义）。

这应该有效：

 <div>{selectedData && Object.values(selectedData.chair.colors).map((x)=>
        JSON.stringify(x)
      )}</div>

这是从你的 sandbox 分叉出来的。

Answer 3

如果要选择颜色，则需要将其存储在另一个状态变量中。

  const [selectedColor, setSelectedColor] = React.useState();

使用Object.values迭代chair.colors

  {Object.values(selectedData.chair.colors).map(val => {
    return <div onClick={() => setSelectedColor(val.name)}>{val.name}</div>
  })
   }

勾选this sandbox

获取的对象 returns 未定义

Fetched object returns underfined

javascript

object

fetch

reactjs

react-hooks