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

Question

我目前正在使用react-simple-maps来显示包含国家/地区的世界地图。

我尝试执行以下场景：

• 我有一张世界地图，每个国家都用蓝色填充
• 我点击一个国家
• 它触发selectCountry(country)操作并使用所选国家/地区更新 redux 存储
• 我得到选定的国家并以绿色突出显示

所有 redux 的东西都有效，因为状态已更新，并且我在我的country道具中选择了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 的工作方式是，当 prop 发生变化时，组件会被重新渲染。 所以如果这是真的，你的组件实际上是重新渲染的。

所以也许：

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

干杯

Answer 2

如果国家/地区发生变化，则组件将重新呈现。 仔细检查您是否正确传递了国家/地区（即确保值已更改，否则不会重新呈现）

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

• 被叫
• 与国家做某事
• 返回新状态（不是通过的状态）

由于状态是不可变的； reducer 的结果状态是当前状态的副本加上新数据