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

直接通过React的props就能实现数据传递，具体操作分两步：

1. 修改Form组件，传递walletAssets给Display #

首先在Form组件里导入Display组件，然后在返回的JSX中渲染Display，并把walletAssets作为props传进去。另外修正原代码里的两处问题：onSubmit需要绑定在<form>标签上（绑定在div上无效），补充缺失的handleChange函数让输入框能正常更新状态。

修改后的Form.js代码：

import React from 'react';
import Display from './Display'; // 导入Display组件

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

  // 补充输入框状态更新函数
  const handleChange = (event) => {
    setWalletAddress(event.target.value);
  };

  function handleSubmit(event) {
    event.preventDefault(); // 阻止表单默认跳转行为
    // 这里假设query是你已定义的查询参数，按需调整
    request("https://sampleapi.com", query).then((data) =>
      setWalletAssets(data)
    );
  }

  return (
    <div className="form">
      <form onSubmit={handleSubmit}> {/* 将onSubmit移到form标签上 */}
        <input
          type="text"
          className="walletAddress"
          placeholder="Enter your wallet address"
          name="walletAddress"
          value={walletAddress} // 绑定value实现受控组件
          onChange={handleChange}
        />
        <button type="submit">Submit</button> {/* 明确按钮类型 */}
      </form>
      {/* 渲染Display组件并传递walletAssets */}
      <Display walletAssets={walletAssets} />
    </div>
  );
}

2. 修改Display组件，接收并使用walletAssets #

在Display组件中通过函数参数接收props，即可直接获取walletAssets数据并渲染展示内容。

修改后的Display.js代码：

import React from 'react';

export default function Display(props) {
  // 解构props，简化数据调用
  const { walletAssets } = props;

  return (
    <div className="display">
      <h3>钱包资产</h3>
      {walletAssets.length === 0 ? (
        <p>请提交钱包地址查询资产</p>
      ) : (
        <ul>
          {walletAssets.map((asset, index) => (
            <li key={index}>
              {/* 根据实际返回的asset结构调整展示字段 */}
              <span>资产名称：{asset.name}</span>
              <span>持有数量：{asset.amount}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

补充提示 #

• 渲染列表时尽量使用数据中的唯一标识作为key，示例中的index仅作临时方案；
• 如果后续组件层级变深、props传递过于繁琐，可考虑使用Context或Redux等状态管理工具，但当前场景下props传递是最直接的方案。

内容的提问来源于stack exchange，提问作者mickdeez