Вопросы Теги

Сортировка и последующая фильтрация данных JSON на отдельные компоненты

используйте

ob_start ();

blockquote>

в самой верхней части вашего скрипта и

ob_end_flush ( );

blockquote>

внизу вашего скрипта. Этот wil включит буферизацию вывода и ваши заголовки будут созданы после того, как страница будет bufferd.

ОБЩИЕ ПРОБЛЕМЫ:

=============== =====

(скопированный ответ из: source )

1) не должно быть никакого выхода (т.е. echo.. или HTML-коды) перед командой header(.......);.

2) удалите любое белое пространство (или новую строку) до и после ?> тегов.

3) ЗОЛОТОЕ ПРАВИЛО! - проверьте, поддерживает ли этот файл php (а также, если вы include другие файлы) UTF8 без кодировки спецификации (а не только UTF-8). Это проблема во многих случаях (потому что кодированный файл UTF8 имеет что-то особенное в начале файла php, которое ваш текстовый редактор не показывает) !!!!!!!!!!!

4) После header(...); вы должны использовать exit;

5) всегда используйте ссылку 301 или 302: 

header("location: http://example.com",  true,  301 );  exit;

6) Включить ошибку составление отчетов. И сообщать об ошибке.

7) Если ни одно из вышеизложенных не помогает, используйте перенаправление JAVSCRIPT (однако, сильно не рекомендуемый метод), может быть последним шансом в пользовательских случаях ...: 

echo ""; exit;

0
задан geeberry 16 January 2019 в 20:37
поделиться

2 ответа

Вы можете создать объект для сопоставления каждого типа с соответствующим компонентом. Примерно так будет работать: 

const LayerVillage = ({ position, name }) => (
  <Marker position={position} icon={locationIcon}>
    <TooltipComponent permanent direction="bottom" opacity={0.6}>
      {name}
    </TooltipComponent>
  </Marker>
);

const layerComponentsByType = {
  village: LayerVillage,
  town: LayerTown
};

const stuff = data.map(location => {
  const LayerControl = layerComponentsByType[location.type];
  return (
    <LayerControl
      key={location.id}
      position={[location.lat, location.lng]}
      name={location.name}
    />
  );
});

Другая возможность заключается в следующем: 

    <LayerControl
      key={location.id}
      {...location}
    />

Таким образом, вы получите пары ключ-значение объекта местоположения в качестве свойств.

Кроме того, у вас может быть компонент по умолчанию, поскольку location.type не может быть свойством layerComponentsByType: 

  const LayerControl = layerComponentsByType[location.type] || DefaultLayerControl;
0
ответ дан David Táboas 16 January 2019 в 20:37
поделиться

Вы можете использовать Set , чтобы найти все уникальные типы в вашем массиве: 

const data = [
    {
        "id": 5,
        "name": "Mole's Town",
        "lat": 15,
        "lng": 18.5,
        "type": "village"
    },
    {
        "id": 783,
        "name": "Mole's Town",
        "lat": 3,
        "lng": 18.5,
        "type": "village"
    },
    {
        "id": 75,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 8.55,
        "type": "town"
    },
    {
        "id": 43,
        "name": "Mole's Town",
        "lat": 33,
        "lng": 15,
        "type": "city"
    },
    {
        "id": 443,
        "name": "Mole's Town",
        "lat": 35,
        "lng": 725,
        "type": "city"
    },
    {
        "id": 4543,
        "name": "Mole's Town",
        "lat": 76,
        "lng": 2,
        "type": "city"
    }
]

const types = [...new Set(data.map(loc => loc.type))]

console.log(types)

Когда они у вас есть, в вашей функции рендеринга сопоставьте их с вашим LayerControl, фильтруя каждое местоположение того же типа и отправьте в качестве реквизита: 

types.map(type => <LayerControl key={type} locations={data.filter(loc => loc.type === type)}/>)

Затем в вашем LayerControl рендеринг, сопоставьте все полученные местоположения с кодом, который вы дали в своем вопросе: 

this.props.locations.map(({id, lat, lng, name}) => //Deconstructing every location to make your code more readable
    <Marker key={id} position={[lat, lng]} icon=
        {locationIcon}>
        <Tooltip permanent direction="bottom" opacity={.6}>
            {name}
        </Tooltip>
    </Marker>
)
0
ответ дан Treycos 16 January 2019 в 20:37
поделиться
Другие вопросы по тегам:

Похожие вопросы: