React组件中返回元素的JS函数无法正常返回问题排查

我尝试检查数据集，判断字符串是否包含特定前缀或后缀，再将其拆分为<span>元素返回。目前JS函数能正确匹配字符串各部分与对应语素，但无法返回拆分后的有效span元素，返回结果如下：

<span></span>
<span>word</span>
<span></span>

实现代码 #

export const morphemeCheck2 = (word) => {
  return (
    <span>
      <span>{prefixCheck(word)}</span>
      <span>{suffixCheck(word)}</span>
      <span>{baseWord(word)}</span>
    </span>
  )
}

const prefixCheck = (x) => {
  api.getPrefixes().then((data) => {
    let prefixes = data
    for (let p = 0; p < prefixes.length; p++) {
      let prefix = prefixes[p].affix_name
      if (x.startsWith(prefix)) {
        return (
          <span className={'suffix ' + prefix} onMouseOver={() => {}}>
            {prefix}
          </span>
        )
      }
    }
  })
}

// 需要重构
const baseWord = (x) => {
  if (prefixCheck(x) && suffixCheck(x)) {
    const prefix = prefixCheck(x)
    const suffix = suffixCheck(x)
    const prefixLength = prefix.props.children.length
    const suffixLength = suffix.props.children.length
    const tail = x.length - suffixLength
    return x.substring(prefixLength, tail)
  } else if (prefixCheck(x)) {
    const prefix = prefixCheck(x)
    const prefixLength = prefix.props.children.length
    return x.substring(prefixLength, x.length)
  } else if (suffixCheck(x)) {
    const suffix = suffixCheck(x)
    const suffixLength = suffix.props.children.length
    const tail = x.length - suffixLength
    return x.substring(0, tail)
  } else {
    return x
  }
}

const suffixCheck = (x) => {
  api.getSuffixes().then((data) => {
    let suffixes = data
    for (let s = 0; s < suffixes.length; s++) {
      let suffix = suffixes[s].affix_name
      if (x.endsWith(suffix)) {
        console.log(suffix)
        return (
          <span className={'suffix ' + suffix} onMouseOver={() => {}}>
            {suffix}
          </span>
        )
      }
    }
  })
}

组件调用代码 #

const AnalysisArea = () => {
 [...]

  let text = "recoded"

  return (
    <React.Fragment>
      <Card className="analysisframe">
        <p className="replicated-text" onClick={handleOpen}>
          {decoder.morphemeCheck2(text)}
        </p>
      </Card>
    </React.Fragment>
  )
}

核心问题：异步逻辑处理错误 #

prefixCheck和suffixCheck内部调用了异步API，但这两个函数本身没有返回任何值（默认返回undefined），then回调里的返回值无法传递到外层。这直接导致morphemeCheck2调用它们时拿到的都是undefined，对应span自然为空。

另外baseWord里直接调用异步函数，无法拿到实际的前缀/后缀内容，也就无法正确计算基础词的截取长度，最终只能返回原单词或错误结果。

修复步骤 #

1. 让前缀/后缀检查函数返回Promise
   修改函数，返回异步请求得到的前缀/后缀文本（而非直接返回组件），方便后续计算基础词。
2. 在组件中用状态管理异步结果
   React渲染函数不能直接处理异步逻辑，需用useEffect触发请求，将结果存在状态中，再根据状态渲染拆分后的span。
3. 重构基础词计算逻辑
   基于拿到的前缀/后缀文本，直接对原字符串进行截取，避免依赖组件的props属性。

具体修改代码 #

第一步：重构前缀/后缀检查函数

// 返回Promise，resolve匹配到的前缀文本或null
export const prefixCheck = async (x) => {
  const data = await api.getPrefixes();
  for (let p = 0; p < data.length; p++) {
    const prefix = data[p].affix_name;
    if (x.startsWith(prefix)) {
      return prefix;
    }
  }
  return null;
};

// 返回Promise，resolve匹配到的后缀文本或null
export const suffixCheck = async (x) => {
  const data = await api.getSuffixes();
  for (let s = 0; s < data.length; s++) {
    const suffix = data[s].affix_name;
    if (x.endsWith(suffix)) {
      return suffix;
    }
  }
  return null;
};

第二步：修改组件处理异步结果

import { useState, useEffect } from 'react';

const AnalysisArea = () => {
  const [morphemeParts, setMorphemeParts] = useState({
    prefix: null,
    suffix: null,
    base: ""
  });
  const text = "recoded";

  useEffect(() => {
    const fetchMorphemes = async () => {
      const prefix = await prefixCheck(text);
      const suffix = await suffixCheck(text);
      
      let base = text;
      if (prefix) base = base.slice(prefix.length);
      if (suffix) base = base.slice(0, -suffix.length);

      setMorphemeParts({ prefix, suffix, base });
    };

    fetchMorphemes();
  }, [text]);

  const renderMorphemes = () => {
    return (
      <span>
        {morphemeParts.prefix && (
          <span className={`prefix ${morphemeParts.prefix}`} onMouseOver={() => {}}>
            {morphemeParts.prefix}
          </span>
        )}
        <span>{morphemeParts.base}</span>
        {morphemeParts.suffix && (
          <span className={`suffix ${morphemeParts.suffix}`} onMouseOver={() => {}}>
            {morphemeParts.suffix}
          </span>
        )}
      </span>
    );
  };

  return (
    <React.Fragment>
      <Card className="analysisframe">
        <p className="replicated-text" onClick={handleOpen}>
          {renderMorphemes()}
        </p>
      </Card>
    </React.Fragment>
  );
};

额外优化建议 #

• 缓存api.getPrefixes()和api.getSuffixes()的结果，避免重复请求
• prefixCheck里的类名写错了（用了suffix），建议修正为prefix

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