无法解构子组件中的道具答案

【问题标题】：Can't destructure props in child component无法解构子组件中的道具
【发布时间】：2022-01-07 19:54:06
【问题描述】：

在将对象传递给子组件时，我在解构 props 时遇到了一些麻烦。这个对象有两个值，一个是另一个对象，第二个是一个函数。

这是我的代码，以防你们中的任何人提供帮助：父 cmp：

export const AdminScreen = () => {
  const {kolorTokenContract, setContract} = useContext(ContractsContext);

  console.log("contract from admin: ", kolorTokenContract);

  return (
    <div className="container">
      <h1>Administrator Screen</h1>
      <hr />

      <div className="row align-items-center">
        <ERC20AdminForm props={{kolorTokenContract, setContract}} />
        <TokenInfo {...kolorTokenContract} />
      </div>
      <hr />
      <Balance />
    </div>
  );
};

子 cmp：

export const ERC20AdminForm = ({kolorTokenContract, setContract}) => {
  //console.log("props from erc20admin form: ", props);
  console.log("contract from erc20admin form: ", kolorTokenContract);

  return (
    <div className="col-8 col-md-6 col-sm-4 ">
      <MintingForm props={kolorTokenContract} />
      <SetVaultForm />
      <TransferOwnershipForm />
    </div>
  );
};

如果我记录“kolorTokenContract”，我会得到未定义的 :(。提前感谢您的帮助！

【问题讨论】：

标签： javascript reactjs react-props react-component object-destructuring

【解决方案1】：

对于子组件：

const ERC20AdminForm = (props:any) => {
console.log("contract from erc20admin form: ", props.kolorTokenContract);

  return (
    <div className="col-8 col-md-6 col-sm-4 ">
      <MintingForm kolorTokenContract={props.kolorTokenContract} />
      <SetVaultForm />
      <TransferOwnershipForm />
    </div>
  );
};

使用单独的 props 从父级调用：

<ERC20AdminForm kolorTokenContract={kolorTokenContract} setContract={setContract} />

这是一个sandbox code 用于概念验证。

【讨论】：

【解决方案2】：

在您的管理屏幕中，您应该检查 kolorTokenContract 。上下文返回什么？你从哪里得到kolorTokenContract 的值，它来自一个api吗？如果是，那么我在定义你没有给它一个值的状态时猜测。对于解决方案，您可以在上下文中定义 kolorTokenContract 时提供一个空对象，也可以设置默认值

const {kolorTokenContract = {}, setContract} = useContext(ContractsContext);

【讨论】：