反应原生 - eslint 给出太多错误答案

【问题标题】：react native - eslint give too much errors反应原生 - eslint 给出太多错误
【发布时间】：2021-06-23 09:32:06
【问题描述】：

我对 react native 的编码不是很好，但我不断收到来自 eslint 的错误，

例如：

 {
        this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
            title={marker.title}
            description={marker.info}>
          </MapView.Marker>
        ))
      }

eslint 提供红线错误消息：Missing "key" prop for element in iteratoreslintreact/jsx-key

代码错误让我犹豫。

还有更多关于道具的错误。

这是为什么呢？地图运行良好，有时我使用 this.props 也会出错。

eslint 的任何替代品还是最好的？

我正在使用 vscode

【问题讨论】：

这能回答你的问题吗？ eslint: Missing "key" prop for element in iterator (react/jsx-key)
它在这个地图迭代中得到了修复，但是例如我有导航类，当我写 this.props.navigation 并且不知何故我收到红线时它可以工作

标签： react-native eslint

【解决方案1】：

您必须为组件数组添加一个关键属性，以便 react 可以正确检测到对象已更改。如果你不这样做，react 只是比较以前和当前的对象引用，这可能会导致一些意外的行为和性能问题。如果您的标记项具有名称属性，您可以这样做：

{
        this.state.markers.map(marker => (
          <MapView.Marker
            key={marker.name}
            coordinate={{longitude: marker.longitude, latitude: marker.latitude}}
            title={marker.title}
            description={marker.info}>
          </MapView.Marker>
        ))
}

【讨论】：