如何将 state 变量的值从一个组件传递到另一个组件？

Question

我有下面的 Form.js 组件，它从输入表单中获取数据并进行 API 调用。 响应存储在我的 walletAssets state 变量中。 现在，如果我想创建一个单独的组件，比如 Display.js 来显示存储在 walletAssets 中的响应，我如何将 walletAssets 的值传递给另一个组件，以便在那里使用它？

export default function Form() {
  const [walletAddress, setWalletAddress] = React.useState("");
  const [walletAssets, setWalletAssets] = React.useState([]);

  function handleSubmit(event) {
    request("https://sampleapi.com", query).then((data) =>
      setWalletAssets(data)
    );
  }

  return (
    <div className="form" onSubmit={handleSubmit}>
      <form>
        <input
          type="text"
          className="walletAddress"
          placeholder="Enter your wallet address"
          name="walletAddress"
          onChange={handleChange}
        />
        <button>Submit</button>
      </form>
    </div>
  );
}



export default function Display() {
     //I want to reference the value of walletAssets here
    return()
}

Answer 1

您应该使用反应上下文或 state 管理器，例如 redux

Answer 2

您可以像这样更改您的显示组件

export default function Display({walletAssets}) {
    return(
       <>
       {
          walletAssets.map((el) => {
              <p>{el}</p>
          });
       }
       </>
    )
}

并传递数据，在表单文件中执行类似的操作

    <div className="form" onSubmit={handleSubmit}>
      <form>
        <input
          type="text"
          className="walletAddress"
          placeholder="Enter your wallet address"
          name="walletAddress"
          onChange={handleChange}
        />
        <button>Submit</button>
      </form>
      <Display walletAssets={walletAssets}/>
    </div>

Answer 3

所以有多种解决方案。
最简单的方法是将 prop 传递给子组件。
像这样：

export default function Form() {
  const [walletAddress, setWalletAddress] = React.useState("");
  const [walletAssets, setWalletAssets] = React.useState([]);

  function handleSubmit(event) {
    request("https://sampleapi.com", query).then((data) =>
      setWalletAssets(data)
    );
  }

  return (
    <div className="form" onSubmit={handleSubmit}>
      <form>
        <input
          type="text"
          className="walletAddress"
          placeholder="Enter your wallet address"
          name="walletAddress"
          onChange={handleChange}
        />
        <button>Submit</button>
      </form>
    </div>
  );
}



export default function Display(props) {
     //I want to reference the value of walletAssets here
    return(<h1>{props.<property>} )
}

如果要将 object 传递给多个组件。 您可以使用一些 state 管理器选项，例如反应上下文或 redux 或 mobx。