来自 React 组件 props 的 Redux 存储状态不反映 Redux 存储的状态值

Question

我有一个反应组件，它有 3 个输入字段和一个按钮。
该组件连接到一个 redux 存储。
有一个动作创建者可以通过 Web API 调用来获取用户的位置信息并更改 redux 存储中的状态。
表单中按钮的onClick事件有一个handleOnClick处理程序，它调用 action 来更新 store 的状态，然后它调用setFormData来更新输入字段中的值以更改输入字段的值。

import React, {useState} from 'react';
import {connect} from 'react-redux';
import {setLocation} from "../actions/location.js";

const LocationForm = ({location, setLocation}) => {
  
  const [formData, setFormData] = useState({
    city:"",
    state:"",
    country:""
  })
  
  const handleOnChange = (e) => {
    setFormData({...formData, [e.target.name]:e.target.value})
  }
  
  const handleOnClick = () => {
    setLocation();
    console.log(location) //!! output: {city:"", state:"", country:""}
    const {city, state, location} = location;
    setFormData({...formData, city, state, location})
  }

  const {city, state, country} = formData;

  return (
    <form>
      <button onClick={handleOnClick}/>
      <label>
        City:
        <input name="city" value={city} onChange={handleOnChange}/>
      </label>
      <label>
        State:
        <input name="state" value={state} onChange={handleOnChange}/>
      </label>
      <label>
        Country:
        <input name="city" value={country} onChange={handleOnChange}/>
      </label>
    </form>
  )
}

const mapStateToProps = (state) => {
  location: state.location
}

export default connect(mapStateToProps, {setLocation})(LocationForm);

问题：从handleOnClick的console.log() handleOnClick ，从 redux 存储传递的location对象的状态仍然具有空字符串作为键值（城市、州、国家）。 但是 redux chrome devtool 中的状态确实表明 location 的状态已更改并且它们具有正确的值。 为什么组件道具中的位置对象没有反映这一点？ 我是否需要使用useEffect钩子来更新组件道具中的location对象？

提前致谢。

Answer 1

如果你想监控location属性的变化，你必须使用一个钩子，这里是一个例子：

import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {setLocation} from "../actions/location.js";

const LocationForm = ({location}) => {
  
  ..
  
  useEffect(() => {
    console.log(location)
    const {city, state, location} = location;
    setFormData({...formData, city, state, location})
  }, [location]);
  
  const handleOnClick = () => {
    setLocation();
  }

  ..
}

每次作为第二个参数传递的数组元素发生变化时， useEffect调用作为第一个参数传递给useEffect的函数。

在这里，每次location更改时， setFormData使用location的新值调用setFormData 。

Answer 2

您将 mapDispatchToProps 匿名对象传递给connect ，但不在组件中使用它。 相反，您将setLocation()作为普通函数调用而无需调度。 您需要调用道具，而不是像这样调用导入的函数：

const LocationForm = ({location, setLocation}) => {
    ...
      setLocation()
    ...

export default connect(mapStateToProps, {setLocation})(LocationForm);

---

我还建议给钩子一个机会，这可能更容易理解恕我直言：

 import {useSelector, useDispatch} from 'react-redux' ... const LocationForm = () => { const location = useSelector((state) => state.location) const dispatch = useDispatch() ... const handleOnClick => { dispatch(setLocation) // if setLocation = (dispatch) => ... // dispatch(setLocation()) // if setLocation = () => (dispatch) => ...