來自 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) => ...