Question

所以我正在构建一个用于角色表管理的 DnD 应用程序，它可以显示技能等等。其中我有一个类（AbiltityClass），它在一个变量（_aSkills）中存储了其他类（SkillClass）的映射。 >

export default class AbilityClass {

    constructor(name, aVal, aMod) {
        this._abilityName = name; // string
        this._abilityVal = aVal; // int
        this._abilityMod = aMod; // int
        this._aSkills = new Map(); // map of SkillClass objects
    }
}


export default class SkillClass {

    constructor(name, prof, mod, bonus){
        this._nameSkill = name; // string
        this._profSkill = prof; // bool
        this._modBonus = bonus; // int
        this._modSkill = this.evalMod(mod); // int
    }
    
    evalMod(mod) {
        return mod + this._modBonus;
    }
}

_aSkills 变量原本是一个 SkillClass 的数组，但由于易于访问，我决定使用 Map 会更好。

我有一个流程，基本上会遍历 _aSkills 中的每个元素，并通过 skillFactory 和 buildSkill 函数从中创建组件应该放在调用 skillFactory 函数的括号中。

const AbilityContainer = (props) => {

  const buildSkill = (value, key) => {
    return(
      <SkillSet
        key={Math.random()}
        skillName={key}
        prof={value._profSkill}
        skillVal={value._modSkill}
        setProf={()=>{}}
      />
    );
  }
  
  const skillFactory = () => {
    return(props.ability._aSkills.forEach(buildSkill));
  }

  return(
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.header_text}>
          {props.ability._abilityName}
        </Text>
      </View>
      <View style={styles.statBox}>
        <View style={styles.ability}>
          <StackedHex isAbility={true} lowerVal={props.ability._abilityVal}/>
        </View>
        <View style={styles.skills}>
          {skillFactory()}   // =================> The function call in question
        </View>
      </View>
    </View>
  );
};

我的问题是 skillFactory 或 buildSkill 没有返回 SkillSet 组件。我使用了一些打印日志并且我已经验证 buildSkill 正在接收正确的数据，但是有些东西不起作用。我没有收到任何错误或警告，SkillSet 组件应该是空的。正如我所说，我最近将 _aSkills 变量从数组更改为映射，并且它作为数组工作。这是我之前代码的格式：

const AbilityContainer = (props) => {

  const buildSkill = (skill) => {
    return(
      <SkillSet
        key = {Math.random()}
        prof={skill._profSkill}
        setProf={skill._profFunc}
        skillName={skill._nameSkill}
        skillVal={skill._modSkill}
      />
    );
  }

  const skillFactory = () => {
    return (props.ability._aSkills.map(x => buildSkill(x)));
  }

  return(
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.header_text}>
          {props.ability._abilityName}
        </Text>
      </View>
      <View style={styles.statBox}>
        <View style={styles.ability}>
          <StackedHex isAbility={true} lowerVal={props.ability._abilityVal}/>
        </View>
        <View style={styles.skills}>
          <SkillSet 
            prof={props.ability._saveProf}
            setProf={props.ability._saveProfFunc}
            skillName={'Save'}
            skillVal={props.ability._saveMod}
            />
          {skillFactory()}
        </View>
      </View>
    </View>
  );
};

我正在使用 Android Studio 进行此构建，但我对 react-native 还是比较陌生。我对所有其他组件及其样式表进行了三次检查，以确保它们没有干扰，所以我知道这与 AbilityContainer 有关。我已经阅读了 Maps 的 forEach 函数，据我所知，我做得对，但我觉得 forEach 正在做的事情我不明白它是如何返回的.

有人知道可能是什么问题吗？提前致谢。

Answer 1

forEach 为每个元素做一些事情，但不返回任何东西（即使你在回调中返回，也只是从 cb 返回，而不是从 .map 返回）这就是该版本不起作用的原因。如果您将其转换回数组 ([...props.ability._aSkills].map...)，这将为您提供 Map 中的数组数组 ([key, value])。您还可以在 for..of 上使用 _aSkills.entries() 循环。

Answer 2

所以现在知道 forEach 不返回任何内容，我只是添加了一个变量并给了我的 buildSkill 函数一些返回值。

这是我所做的：

const AbilityContainer = (props) => {
  let skills = new Array();

  const buildSkill = (value, key) => {
      skills.push(<SkillSet
        key={Math.random()}
        skillName={key}
        prof={value._profSkill}
        skillVal={value._modSkill}
        setProf={()=>{}}
      />);
  }
  
  const skillFactory = () => {
    props.ability._aSkills.forEach(buildSkill);
    return(skills);
  }
... 
};

反应原生：函数不返回反应组件

2 个答案: