Javascript 当redux存储区更改时，如何重新渲染组件？

目前有两个组件存在问题，Body.js和NavBar.js。我在body组件中运行useEffect，该组件获取用户的地理位置并获取他们所在城市的天气信息。我的问题是，当用户在NavBar.js中搜索城市时，我将城市天气信息设置为redux store，然后我希望它重新渲染Body.js组件，但使用搜索到的城市信息，我似乎无法确定如何使其工作。这是我的身体部件

function Body(props) {
  const [location, setLocation] = useState({});
  const [info, setInfo] = useState({});

  function getGeo() {
    navigator.geolocation.getCurrentPosition(function (position) {
      setLocation({
        lat: position.coords.latitude,
        long: position.coords.longitude,
      });
    });
  }

  useEffect(() => {
    getGeo();

    if (location.lat === undefined || location.long === undefined) {
      return;
    }

    fetch(
      `http://api.openweathermap.org/data/2.5/weather?lat=${location.lat}&lon=${location.long}&units=metric&appid=4key`
    )
      .then((response) => {
        return response.json();
      })
      .then((result) => {
        if (props.searchedCity === null) {
          setInfo(result);
        } else {
          setInfo(props.searchedCity);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, [location.lat, location.long, setInfo]);

//small part of return statement theres a lot more using the info state

return (
    <>
      <img className="adv" src="image1.png" />
      <div className="grid-block-container">
        <div className="city-weather">
          <div className="info-container">
            <h2>{info.name || "Loading..."} Weather</h2>
            <p>as of 12:00 pm CDT</p>
            <h1>
              {parseInt((info.main?.temp * 9) / 5 + 32) || "Loading..."}&#176;
            </h1>
)

}
const mapStateToProps = (state) => {
  return {
    searchedCity: state.searchedCity,
  };
};

export default connect(mapStateToProps, null)(Body);

功能体（道具）{
const[location，setLocation]=useState（{}）；
const[info，setInfo]=useState（{}）；
函数getGeo（）{
navigator.geolocation.getCurrentPosition（函数（位置）{
定位({
纬度：位置坐标纬度，
long:position.coords.longitude，
});
});
}
useffect（（）=>{
getGeo（）；
if（location.lat==未定义| | location.long==未定义）{
返回；
}
取回(
`http://api.openweathermap.org/data/2.5/weather?lat=${location.lat}&lon=${location.long}&units=metric&appid=4key`
)
。然后（（响应）=>{
返回response.json（）；
})
。然后（（结果）=>{
if（props.searchedCity==null）{
setInfo（结果）；
}否则{
setInfo（props.searchedCity）；
}
})
.catch（（错误）=>{
控制台日志（err）；
});
}，[location.lat，location.long，setInfo]）；
//return语句的一小部分使用info状态还有很多
返回(
{info.name | |“加载…”天气
截至CDT下午12:00

{parseInt（（info.main？.temp*9）/5+32）| |“加载…”°；
)
}
常量mapStateToProps=（状态）=>{
返回{
searchedCity:state.searchedCity，
};
};
导出默认连接（MapStateTops，null）（正文）；

---

NavBar.js只是根据用户输入获取新的天气信息，并将其设置为redux store“searchedCity”，最初设置为null（此功能已被选中），而这会更新redux store，显然不会导致Body.js重新渲染，并且不会使用该信息。在redux更改后，如何重新呈现body.js，并将信息设置为redux存储中的内容？非常感谢您的帮助，我知道这是一个大问题。

您似乎没有使用

MapStateTrops

。至少不在提供的代码中。你的

连接

或

使用选择器

在哪里？它在最底部。你想在redux存储更改时运行效果吗？如果是这样，您需要将

props.searchedCity

作为deps.传递

[location.lat，location.long，setInfo，props.searchedCity]你是个天才，传递道具。依赖中的searchedCity工作得很好，我不知道为什么我没有想到这个lol。。。