小编Mar*_*rco的帖子

我一直在收到错误:

"路由器"可能只有一个子元素

当使用react-router时.

我似乎无法弄清楚为什么这不起作用,因为它与他们在示例中显示的代码完全相同:https://reacttraining.com/react-router/web/guides/quick-start

这是我的代码:

import React from 'react';
import Editorstore from './Editorstore';
import App from './components/editor/App';
import BaseLayer from './components/baselayer';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import {render} from 'react-dom';

const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);

const store = new Editorstore();
const stylelist = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css'];

stylelist.map((link) => {
    const a = document.createElement('link');
    a.rel = 'stylesheet';
    a.href = link;
    document.body.appendChild(a);
    return null;
});

render((
  <Router>
    <Route exact  path="/" component={BaseLayer} />
    <Route …

我正在尝试集成传单地图，但我认为这不是问题所在。无论如何要重新渲染我的地图，我想使用 componentDidUpdate 来查看道具是否发生变化，我从父组件传递给我的地图组件。但是现在问题来了，每当我尝试console.log(prevProps.xx, this.props.xx)它们时它们都是完全相同的，即使我刚刚更新它，所以我不能真正使用 componentDidUpdate，还有其他方法吗？此外 componentWillReceiveProps 将不起作用，当我在父组件更新我的状态并将其传递给我的地图组件时，它总是 1:1 相同，因此无法进行比较。

这是我的代码：

var Map = React.createClass({

map: null,
tileLayer : null,

componentDidMount: function() {
   // code to run just after the component "mounts" / DOM elements are created
   // make the AJAX request for the GeoJSON data
   // create the Leaflet map object
   if (!this.map) this.init('mapid');
 },
 componentWillReceiveProps: function(nextProps) {
   console.log(nextProps.labels, this.props.labels);
 },
 componentDidUpdate(prevProps, prevState) {
   const zoom = this.props.labels.zoom;
   const mapstyle = this.props.labels.mapstyle;
   const latlng = [this.props.labels.lat, this.props.labels.lng];
   this.map.setView(latlng); …

您能否给我一个论点，为什么方法A比方法B更好？

方法A：

const transformCompanyOptions = (companies: Array<{id: string, name: string}>, selectedId: string) => {
  return companies.map(key => {
    return {
      value: key.id,
      label: key.name,
      checked: key.id === selectedId
    }
  })
};

方法B：

const transformCompanyOptions = (companies: Array<{id: string, name: string}>, selectedId: string) => {
 const ret = Object.keys(companies).map((key) => {
    const newCompany = {};
    newCompany['value'] = companies[key].id;
    newCompany['label'] = companies[key].name;
    if (companies[key].id === selectedId) {
      newCompany['checked'] = true;
    }
    return newCompany;
  });
  return ret;
};

谢谢