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

Posted 2023-03-13

【中文标题】无法映射数组并获取 Screen React Native 上的值

【英文标题】：Unable to map the array and get the values on 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 中渲染组件

【参考方案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 非常感谢 :)