Question

我目前正在与react-simple-maps一起玩，以显示包含国家/地区的世界地图。

我尝试执行以下情形：

我有一张世界地图，每个国家都用蓝色填充
我点击一个国家
它会触发selectCountry(country)动作并使用所选国家/地区更新redux商店
我得到了所选国家/地区并用绿色突出显示

所有redux东西都起作用，因为状态已更新，并且我在country道具中选择了国家。

我的问题是，即使我使用以下代码，<Geography>组件也不会重新呈现并且没有用绿色填充：

style={{ default: {fill: country.NAME === geography.properties.NAME ? 'green' : 'blue' }}}

如何重新渲染Geography组件（只是所选的国家/地区）以将其填充为绿色？我是否被迫使用forceUpdate？

这是我的文件：

Worldmap.jsx

import topoWorldMap from '../../data/world-110m.json';

const Worldmap = ({ country, selectCountry }) => {
  return (
    <div>
      <ComposableMap
        projectionConfig={{
          scale: 205,
          rotation: [-11, 0, 0]
        }}
        width={980}
        height={551}
      >
        <ZoomableGroup center={[0, 20]} disablePanning>
          <Geographies geography={topoWorldMap}>
            {(geographies, projection) =>
              geographies.map(geography => (
                <Geography
                  onClick={() => selectCountry(geography.properties)}
                  key={geography.properties.NAME}
                  geography={geography}
                  projection={projection}
                  style={{
                    default: {
                      fill: country.NAME === geography.properties.NAME ? 'green' : 'blue'
                    }
                  }}
                />
              ))
            }
          </Geographies>
        </ZoomableGroup>
      </ComposableMap>
    </div>
  );
};

Worldmap.defaultProps = {
  country: {}
};

Worldmap.propTypes = {
  country: PropTypes.objectOf(PropTypes.any),
  selectCountry: PropTypes.func.isRequired
};

先谢谢了

Answer 1

我在我的国家/地区道具中选择了国家/地区

React的工作方式是，当道具更改时，组件将重新渲染。因此，如果为真，则实际上是重新渲染了组件。

所以也许：

当国家/地区更改时，您的渲染功能不会提供其他UI（您确定样式中的“默认”字段吗？）
实际上国家（地区）属性没有变化（您可以通过在render函数中设置<span>{country.toString()}</span>来调试它），然后确保正确使用带有connect(mapStateToProps)的react-redux

欢呼

Answer 2

如果国家/地区更改，则组件将重新呈现。仔细检查您是否正确通过了国家/地区（即，请确保该值已更改，否则它将不会重新呈现）

检查您的减速器以确保它是

被称为
对国家有所作为
返回新状态（不是通过的状态）

由于状态是不可变的； Reducer产生的状态是当前状态的副本加上新数据

未使用来自redux的prop重新渲染React子组件

2 个答案: