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

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

I get the country selected in my country prop

React 的工作方式是，当 prop 更改时，组件会重新渲染。因此，如果这是真的，您的组件实际上会重新渲染。

所以也许:

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

干杯