一旦 state 在反應中更改，useSelector 無法進行實時更新

Question

我正在通過使用 react 和 redux thunk 來實現搜索功能。 此搜索的要求是在 thunk 中調用 fetchApi 並更新 state 以便我們可以顯示。 ui部分是這樣的：

function Search({fetchDataApi}) {
  const [data, setData] = useState([])
  const [token, setToken] = useState('')
  const dataFromState = useSelector(state=>state.newData) || []
  const handleSubmit = () => {
    fetchDataApi(token) // dispatch new data inside.It get updated by checking getState()
    setData(dataFromState)
  }
  const handleOnChange =(e)=> {
      setToken(e.target.value)
  }
  return (
    <div className="App">
        <input onChange={handleOnChange}/>
     <button onClick={handleSubmit}>Search</button>
     {data.map(item=><li>{item}</li>)}
     
    </div>
  );
}

export default App;

當我第一次單擊按鈕時，我調用了 api 並且 state 也得到了更新，但是 useSelector 不會實時返回它，所以只有 setData 設置的空數組。 當我第二次單擊按鈕時，數據顯示出來。 是否與 useSelector 或其他原因導致此問題有關？ 這是我簡化的 thunk 動作：

const fetchDataApi = async(token, getState, dispatch) => {
...error handle
const response = await api(token)
dispatch(setNewData(response))
...console.log(getState()) // get updated successfully 
}

setNewData 是一個與 reducer 匹配的常規動作 這是 setNewData：

export const setNewData= (data)= ({
 type: 'SET_NEW_DATA'
 data
})

Answer 1

我認為問題在於您的句柄提交 function。 當“dataFromState”可能尚未更新時，您正在調用 setData。

看起來額外的本地 state 是不必要的。 我會 map over dataFromState 而不是保留精確的副本。 見下文：

function Search({fetchDataApi}) {
  const [token, setToken] = useState('')
  const dataFromState = useSelector(state=>state.newData) || []
  const handleSubmit = () => {
    fetchDataApi(token) // dispatch new data inside.It get updated by checking getState()
  }
  const handleOnChange =(e)=> {
      setToken(e.target.value)
  }
  return (
    <div className="App">
        <input onChange={handleOnChange}/>
     <button onClick={handleSubmit}>Search</button>
     {dataFromState.map(item=><li>{item}</li>)}
     
    </div>
  );
}

export default App;

Answer 2

我認為這篇文章完美地回答了我的問題。 redux state 值在第二次單擊時更改我使用 useEffect 解決了這個問題。 感謝您的檢查。