一旦 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 解决了这个问题。 感谢您的检查。