React Native Props 不保存到新数组中答案

【问题标题】：React Native Props Not Saving into New ArrayReact Native Props 不保存到新数组中
【发布时间】：2019-10-29 20:47:32
【问题描述】：

我正在将道具传递给嵌套组件。道具正确进入，但我无法像这样将它们传递给新数组：

import React, {useState, useEffect} from 'react';
import {StyleSheet, View} from 'react-native'
import MapView, {Marker} from 'react-native-maps';
    const Map = ({navigation, locationsOne, locationsTwo, locationsThree}) => { //these are coming in correctly when I console.log ie: {"coords":{"accuracy":602,"altitude":0,"heading":0,"latitude":99.4210083,"longitude":-100.0839934,"speed":0},"mocked":false,"timestamp":1572363100628}
        const [markers, setMarkers] = useState([
          {
            location : locationsOne,
            title: 'One'
          },
          {
            location : locationsTwo,
            title: 'Two'
          },
          {
            location : locationsThree,
            title: 'Three'
          }
        ]);
    return (
    <MapView style={styles.map} initialRegion={currentLocation.coords}>
      {markers.map((locationTEST) => (
        console.log('location: ' + JSON.stringify(locationTEST)) //this returns nothing in the locations arrays ie: {"location":[],"title":"One"}
         <MapView.Marker
           title="This is a title"
           description="This is a description"
           coordinate={{
             latitude: locationTEST.location.coords.latitude,
             longitude: locationTEST.location.coords.longitude,
           }}
         />
      ))}
</MapView>
);

locationsOne 的值类似于：{"coords":{"accuracy":602,"altitude":0,"heading":0,"latitude":99.4210083,"longitude":-100.0839934,"speed":0},"mocked":false,"timestamp":1572363100628}

我怎么不能把 props 拿到一个新的数组（markers）数组中呢？

【问题讨论】：

一件事就是看你的代码。不使用Map 作为组件名称可能不是一个好主意。 Map 是 JavaScript 中的 OOB 对象。
@johnborges 好点，我更新了命名约定，但仍然无法通过函数查看值
@Olivia 我怀疑它是否与 json 骨架有关。不太确定，但我见过的示例使用相同的 json 骨架
有趣。我刚刚更新了一个 useEffect 并放入了一个回调数组——locationsOne、locationsTwo、locationsThree，我能够取得一些进展

标签： arrays loops react-native react-native-navigation react-props

【解决方案1】：

<Map/>第一次渲染时，locationsOne仍然包含[]。

当 props（意味着 locationsOne 改变）时，状态没有改变。

所以你应该useEffect 在道具改变时更新状态。

const [markers, setMarkers] = useState ...

useEffect(() => {
  const newMarkers = [
    {
      location : locationsOne,
      title: 'One'
    },
    {
      location : locationsTwo,
      title: 'Two'
    },
    {
      location : locationsThree,
      title: 'Three'
    }
  ];
  setMarkers(newMarkers);
}, [locationsOne, locationsTwo, locationsThree]);

【讨论】：

谢谢，这是正确的，我现在可以看到位置值，但我担心递归。当我使用 console.log 时，我看到该位置被加载了 1400 次。我的理解是 useEffect 应该只在页面加载时运行一次，然后 [ ] 允许我们查看道具何时更改。他们真的应该只改变一次，对吧？如果是这样，这是我理解页面如何通过导航加载的另一个问题。
使用useEffect(() => {...}, []) 解决了您的问题吗？
我认为你应该受益于使用React.memo()

【解决方案2】：

然后设置 useEffect 回调数组 [] （这使系统陷入困境，因为每次更改位置时都会重新运行位置，这导致位置被调用 1400 次），我只需要像 setMarkers()所以：

useEffect(() => {
    const newMarkers = [
    {
      location : locationsOne,
      title: 'One'
    },
    {
      location : locationsTwo,
      title: 'Two'
    },
    {
      location : locationsThree,
      title: 'Three'
    }
  ];
  setMarkers(newMarkers);
}, []);

【讨论】：