React项目集成WebAssembly(Wasm)点击计算无响应问题求助

问题核心原因 #

• 你从input框获取的value是字符串类型，而AssemblyScript导出的factorial阶乘函数要求接收数值类型参数，直接传入字符串会导致WASM内部运算异常，无法返回正确结果。
• 异步调用逻辑缺少错误捕获，即使WASM调用抛出异常你也无法在控制台观测到，问题无法定位。
• 可选优化点：每次点击按钮都重新await Wasm实例的Promise，虽然逻辑没问题，但重复await无意义，建议提前初始化缓存实例。

修复方案 #

直接修改App.js的逻辑即可，示例代码如下：

import React, { useState, useEffect } from 'react';
import waApi from './components/wa-api';

function App() {
  const [value, setValue] = useState(8);
  const [result, setResult] = useState();
  // 提前缓存WASM实例，避免每次点击重复await
  const [waInstance, setWaInstance] = useState(null);

  // 组件挂载时初始化WASM
  useEffect(() => {
    const init = async () => {
      try {
        const instance = await waApi;
        setWaInstance(instance);
      } catch (err) {
        console.error('WASM实例初始化失败', err);
      }
    };
    init();
  }, []);

  const handleCalculate = async () => {
    // 先做类型转换，确保传入的是数值
    const num = parseInt(value, 10);
    if (isNaN(num) || num < 0) {
      alert('请输入合法的非负整数');
      return;
    }
    if (!waInstance) {
      alert('WASM还未初始化完成，请稍候再试');
      return;
    }
    try {
      const res = waInstance.factorial(num);
      setResult(res);
    } catch (err) {
      console.error('调用阶乘方法失败', err);
    }
  };

  return (
    <div className="App">
      <p>
        求
        <input value={value} onChange={evt => setValue(evt.target.value)} />
        的阶乘，结果为{result ?? '未计算'}
      </p>
      <button onClick={handleCalculate}>
        计算
      </button>
    </div>
  );
}

如果修改后依然有问题，可以打开浏览器控制台查看打印的错误日志，进一步定位是WASM导出方法名错误、还是方法参数类型不匹配的问题。

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