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

Posted 2023-03-27

【中文标题】反应原生 - eslint 给出太多错误

【英文标题】：react native - eslint give too much errors

【发布时间】：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 并且不知何故我收到红线时它可以工作

【参考方案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>
        ))