从 redux 选择器获取值 javascript

Question

我正在调用一个端点，该端点 return 是我的 redux 存储的对象。该对象的 redux 选择器 returns:

Coin selector:  
{zynecoin: {…}}
zynecoin: {usd: 0.214749}
[[Prototype]]: Object

这是组件：

const ChartModal = (props) => {
  const coinSelector = useSelector(selectCoin);
  let coinValuesEnt = [];
  let coinValuesVal = [];

  React.useEffect(() => {
    if (coinSelector !== undefined) {
      coinValuesEnt = Object.entries(coinSelector);
      coinValuesVal = Object.values(coinSelector);
      console.log("Coin selector: ", coinSelector);
      console.log("Object.entries: ", coinValuesEnt[0]);
      console.log("Object.values: ", coinValuesVal[0]);
    }
  }, [coinSelector]);

  const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    pt: 2,
    px: 4,
    pb: 3,
  };

  return (
    <Modal
      hideBackdrop
      open={props.openModal}
      onClose={props.handleModalClose}
      // aria-labelledby="child-modal-title"
      // aria-describedby="child-modal-description"
    >
      <Box sx={{ ...style, width: 300 }}>
        <h3>Coin: {props.coinText}</h3>
        <h3>
          Price: 
          {/* {JSON.stringify(coinSelector).substring(
                    JSON.stringify(coinSelector).lastIndexOf(":") + 1,
                    JSON.stringify(coinSelector).length - 2
                  )} */}
        </h3>
        <CandleStickChart />
        <Button onClick={props.handleModalClick1}>Show Full Chart</Button>
        <Button onClick={props.handleModalClick2}>Add to Portfolio</Button>
      </Box>
    </Modal>
  );
};

我尝试在我的 useEffect 中将选择器输入到 Object.values 和 Object.entries，当 useEffect 运行 3 console.logs return:

Coin selector:  {zynecoin: {…}}zynecoin: {usd: 0.214749}[[Prototype]]: Object

Object.entries:  (2) ['zynecoin', {…}] 0: "zynecoin" 1: {usd: 0.214749} length: 2
[[Prototype]]: Array(0)

Object.values:  {usd: 0.214749}usd: 0.214749[[Prototype]]: Object

我只需要 usd 键指定的数字，我尝试了各种方法，例如：

coinValuesVal[0].usd
coinValuesVal[0][0]
coinValuesEnt.usd
coinValuesEnt[1]

它们会导致 usd undefined、[0] undefined 等编译错误。我能够提取价格的唯一方法是我的 h3 标签中的注释部分，它看起来不正确方法来做到这一点。我做错了什么？

Answer 1

所以两部分的问题，

你想要 zynecoin 的键，显然访问时只是 returns { usd: <price> }
你想要所述键的值，在本例中 usd

获取对象zynecoin的keyusd,
Object.keys(coinSelector.zynecoin)[0]（returns 键数组，其中只有 usd 存在。我们只需要第一个。）

要获取值，您知道它应该像
一样简单 coinSelector.zynecoin.usd

如果您因为未定义而遇到问题。没有其他办法解决它。你必须放一个三元运算符来检查 coinSelector.zynecoin 是否存在。

{
  coinSelector.zynecoin && <Price code goes here>
}

或者，如果您使用的是最新的 ES，请使用可选链接。（但这仍然会显示空价格）

PS: useEffect 在渲染后解析。因此，如果从您的组件安装的那一刻起该选择器是未定义的，它将首先使用未定义的。您不需要为派生状态使用该挂钩。把代码放在钩子外面就行了。

从 redux 选择器获取值 javascript

Getting value from redux selector javascript

javascript

reactjs

redux