React中点击按钮渲染Promise值：跨模块状态设置难题

这其实是个很典型的异步代码解耦问题，不用把状态更新逻辑硬塞进contract.jsx里——咱们要做的就是让contract模块专注于数据获取，把状态管理的工作交还给App组件本身。这里有两种简洁的实现方式：

方案1：直接链式调用Promise（最推荐） #

既然你的accounts函数已经返回了Promise，那在App组件里调用它的时候，直接通过.then()获取异步结果，再更新状态就好了，完全不需要修改contract.jsx的核心逻辑：

第一步：保持contract.jsx的独立性 #

只需要确保accounts函数在异步操作完成后，用resolve把结果传递出来：

// contract.jsx
export function accounts() {
  // 这里模拟你的异步操作，比如调用web3获取账户
  return new Promise((resolve, reject) => {
    // 替换成你实际的异步逻辑
    setTimeout(() => {
      const mockAccounts = ['0x123...', '0x456...'];
      resolve(mockAccounts); // 把结果通过Promise传递出去
    }, 1000);
  });
}

第二步：在App组件里处理状态更新 #

不管你用的是类组件还是函数组件，都可以在组件的生命周期钩子（或副作用钩子）里调用accounts，然后在then回调里更新状态：

类组件版本（对应你提到的componentDidMount）

// App.jsx
import React, { Component } from 'react';
import { accounts } from './contract';

class App extends Component {
  state = {
    accounts: [] // 初始化账户状态
  };

  componentDidMount() {
    // 调用accounts并链式处理结果
    accounts()
      .then(result => {
        this.setState({ accounts: result }); // 直接在组件内部更新状态
      })
      .catch(err => {
        // 别忘了处理异步错误
        console.error('获取账户列表失败:', err);
      });
  }

  render() {
    return (
      <div className="account-list">
        <h2>我的账户</h2>
        {this.state.accounts.map((account, index) => (
          <p key={index}>{account}</p>
        ))}
      </div>
    );
  }
}

export default App;

函数组件版本（用React Hooks）

如果是现代React项目，用useEffect和useState更简洁：

// App.jsx
import React, { useState, useEffect } from 'react';
import { accounts } from './contract';

function App() {
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    // 组件挂载时执行异步操作
    accounts()
      .then(result => setAccounts(result))
      .catch(err => console.error('获取账户失败:', err));
  }, []); // 空依赖数组确保只执行一次

  return (
    <div className="account-list">
      <h2>我的账户</h2>
      {accounts.map((account, index) => (
        <p key={index}>{account}</p>
      ))}
    </div>
  );
}

export default App;

方案2：给accounts传递回调函数（兼容旧场景） #

如果因为某些原因你需要在contract.jsx里触发状态更新，但又不想耦合组件实例，可以让accounts接收一个回调函数作为参数：

修改contract.jsx #

// contract.jsx
export function accounts(onSuccess, onError) {
  // 模拟异步操作
  setTimeout(() => {
    try {
      const mockAccounts = ['0x123...', '0x456...'];
      onSuccess(mockAccounts); // 调用成功回调
    } catch (err) {
      onError(err); // 调用错误回调
    }
  }, 1000);
}

在App组件里传入状态更新逻辑 #

// App.jsx 类组件示例
componentDidMount() {
  accounts(
    (result) => this.setState({ accounts: result }), // 成功时更新状态
    (err) => console.error('获取账户失败:', err) // 错误时处理
  );
}

不过这种方案不如Promise链式调用优雅，因为Promise本身就是为了替代回调地狱设计的，所以更推荐第一种方案。

核心思路就是分离关注点：contract模块只负责做数据请求/获取，把结果通过Promise抛出来；App组件负责接收结果并管理自己的状态，这样两个模块完全独立，也符合React的组件设计原则。

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