无法映射数组并获取 Screen React Native 上的值答案

【问题标题】：Unable to map the array and get the values on Screen React Native无法映射数组并获取 Screen React Native 上的值
【发布时间】：2022-01-10 13:31:15
【问题描述】：

const DynPut: FC<Props> = Props => {

const [value, setValue] = useState<string>(['1', '2', '3', '4']);

  return (
    <View>
      {value.map(v => {
        <Text>{v}</Text>;
      })}
    </View>
  );
};

无法在屏幕上获取值 1-5。我正在使用打字稿，还保存了带有.tsx扩展名的文件

【问题讨论】：

; 会在保存文件时自动添加到 map 函数的末尾。无法摆脱它
您是否在某处渲染组件，例如 app.tsx？
是在 app.tsx 中渲染组件

标签： javascript arrays typescript react-native

【解决方案1】：

地图的语法错误，请改用普通括号：

{value.map((v) => (
    <Text>{v}</Text>
))}

【讨论】：

它解决了错误。但在某些情况下，我们也使用{ }。如果错了，请纠正我，如果我们想在地图中编写多个函数或操作，那么我们必须使用 { }
@AthavanT 你可以把它作为公认的答案，我只是指出有不同的方法。

【解决方案2】：

仅供参考

map() 期望返回值，有多种可能，例如：

const data = [{ x: 55, y: 34 }, { x: 75, y: 12 }];

const result1 = data.map(d => d.x); // inline

const result2 = data.map(d => (
  d.x // use round brackets
));

const result3 = data.map(d => {
  return d.x; // use return statement
});

console.log(result1, result2, result3);

如果你想在返回值之前对数据做一些事情，最后一种方法很方便。

const data = [{ x: 55, y: 34 }, { x: 75, y: 12 }];

const result = data.map(d => {
  const xTimesFive = d.x * 5; // do something with the x value
  const dividedByTwo = xTimesFive / 2;
  return dividedByTwo;
});

console.log(result);

// note, a simple calculation or check can also be done in the other methods
console.log(data.map(d => d.x > 60 ? "big" : "small"));

【讨论】：

真棒，简洁而彻底的答案。 TIL，非常感谢！
@jakehurt 非常感谢 :)