提交后負責顯示我的所有交易的組件未更新

我正在使用帶有 react 的 redux 工具包并進行了基本設定，因為我正在構建一個簡單的費用跟蹤器，所以我有兩個操作：獲取所有交易并添加一個新交易。而已。

我的問題：當我創建一個新事務時，負責顯示我的資料的組件沒有更新，我只能在重繪 頁面后看到更改。下面你可以看到我的 transactionSlice 檔案：

const initialState = {
    transactions: [],
    loading: false,
    error: null,
}

export const getTransactions = createAsyncThunk(
    "transactions/getTransactions",
    async () => {
        const res = await axios.get('http://localhost:8000/transactions')
        return res.data
    }
)

export const addTransaction = createAsyncThunk(
    "transaction/addTransaction",
    async(data) => {
       const res = await axios.post('http://localhost:8000/transactions', data);
        return res.data
    }
)

const transactionsSlice = createSlice({
    name: 'transactions',
    initialState,
    reducers: {},
    extraReducers: {
        [getTransactions.pending]: (state) => {
            state.loading = true;
        },
        [getTransactions.fulfilled]: (state, {payload}) => {
            console.log(payload);
            state.loading = false;
            state.transactions = payload;
            state.error = ''
        },
        [getTransactions.rejected]: (state) => {
            state.loading = false;
            state.error = state.error.message;
        },
        [addTransaction.pending]: (state) => {
            state.loading = true;
        },
        [addTransaction.fulfilled]: (state) => {
            state.loading = false;           
        },
        [addTransaction.rejected]: (state) => {
            state.loading = false;
            state.error = state.error.message;
        }
    }
});

這是我顯示所有交易的組件中的代碼

 const { transactions, loading } = useSelector(selectAllTransactions);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getTransactions());
  }, [dispatch]);

但是當我發出帖子請求時，我的所有交易狀態不會立即更新。如果我更新頁面并且我手動進行，我只能看到更改。我想知道如果我有 useEffect 監視更改，為什么會發生這種情況？

AddTransaction.js 檔案：

const [transactionName, setTransactionName] = useState('');
  const [amount, setAmount] = useState('');

  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      transactionName,
      amount
    }
    
    if(transactionName && amount){
      dispatch(addTransaction(data));
      dispatch(getTransactions());
      setTransactionName('')
      setAmount('');
    }

  }

我試圖用谷歌搜索它，但似乎我的懷疑是如此愚蠢，以至于我什至找不到答案。這是我的服務器檔案：

app.post('/transactions',(req, res) => {
    const {transactionName, amount} = req.body;
    const query = `INSERT INTO transactions (title, amount) 
                        VALUES ("${transactionName}", "${amount}")`

    db.query(query, (err, result) => {
        if(err){
            console.log(err)
        }
        res.send(result)
    })
    
});

我錯過了什么嗎？有人可以向我解釋為什么負責顯示所有交易的組件在提交后沒有更新嗎？

uj5u.com熱心網友回復：

嘗試執行getTransactions一次完成addTransaction(data)，而不是同時：

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      transactionName,
      amount
    }
    
    if(transactionName && amount){
      dispatch(addTransaction(data))
        .then(() => {
          dispatch(getTransactions())
          setTransactionName('')
          setAmount('')
        }
    }
  }

標籤：mysql 反应 redux 工具包

上一篇：如何更有效地用LEFTJOIN重寫UNION

下一篇：獲取在1個作業日內關閉的專案