Javascript React组件在redux状态更新时未更新

我正在启动一个动作来执行一些切换功能，但是，即使redux状态为

const Countries = ({ countries, toggleCountry }) => (
  <div>
    <h4> All Countries </h4>
    <div className="container">
      {countries.map((country, index) => (
        <div
          key={index}
          className={`countryContainer ${country.visited ? 'visited' : ''}`}
        >
          <img src={country.flag} alt="countryFlag" />
          <p className="countryName"> {country.name} </p>
          <button onClick={() => toggleCountry(country.name)}>
            {country.visited ? 'undo' : 'visited'}
          </button>
        </div>
      ))}
    </div>
  </div>
);

const mapStateToProps = ({ countries }) => ({
  countries
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      toggleCountry
    },
    dispatch
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Countries);

还有我的动作创造者

export const toggleCountry = countryName => {
  return dispatch => {
    dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
  }
}

---

该操作需要

action.name

，但会收到

action.countryName

问题就在这里

export const toggleCountry = countryName => {
  return dispatch => {
    dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
  }
}

修正：

---

该操作需要

action.name

，但会收到

action.countryName

问题就在这里

export const toggleCountry = countryName => {
  return dispatch => {
    dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
  }
}

修正：

---

这里

country.name==action.name？{…国家，已访问：！国家。已访问}：国家

您正在搜索action.name，但在下面的声明中，您没有为负载指定正确的名称

export const toggleCountry = countryName => {
      return dispatch => {
        dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
      }
    }

修正：

---

这里

country.name==action.name？{…国家，已访问：！国家。已访问}：国家

您正在搜索action.name，但在下面的声明中，您没有为负载指定正确的名称

export const toggleCountry = countryName => {
      return dispatch => {
        dispatch({ type: 'UPDATE_COUNTRY_VISITED', countryName })
      }
    }

修正：

---

你能显示你的

toggleCountry

action创建者代码吗？@VuHuuCuong Done和相应的减速机：）@VuHuuCuong也完成了，修复了它。使用的是

name

而不是'countryName`facepalm你能显示你的

toggleCountry

动作创建者代码吗？@VuHuuCuong done和相应的减速机：）@VuHuuCuong也做了，修复了它。正在使用

name

而不是'countryName`facepalm

export const toggleCountry = countryName => {
      return dispatch => {
        dispatch({ type: 'UPDATE_COUNTRY_VISITED', name :countryName })
      }
    }