Question

所以我有一个非常简单的react-app。它会在第一个渲染器上渲染一些汽车，当您单击详细信息时，它将带您到另一个路由器，并根据其ID仅显示该车辆。

遵循正确的顺序，打开页面，redux充满数据，渲染汽车卡，然后单击“详细信息”按钮，react-router进入并将我们路由到某些特定汽车的ID都可以，根据ID我们可以看到汽车。

但是...到那时，当您尝试单击重新渲染页面时，我的redux商店什么也没得到，我该怎么办？如果不需要，我是否需要补充每个需要redux存储以提取项目的组件？

这是我的redux片段

import { createSlice, createEntityAdapter, createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

const carAdapter = createEntityAdapter();

// async action
export const fetchCars = createAsyncThunk('cars', async () =>{
  const car = await axios.get('http://localhost:5000/api/cars');
  return car.data.data
});

const carSlice = createSlice({
  name: 'cars',
  initialState: carAdapter.getInitialState({
    status: 'idle',
    error: null
  }),
  reducers:{
  },
  extraReducers :{
    [fetchCars.pending]: (state, action) => {
      state.status = 'loading'
    },
    [fetchCars.fulfilled]: (state, action) => {
      state.status = 'fulfilled'
      carAdapter.setAll(state, action.payload)
    },
    [fetchCars.rejected]: (state, action) => {
      state.status = 'failed'
      state.error = action.error.message
    }
  }
})

export const {
  selectAll: selectAllCars,
  selectById : selectCarById,
} = carAdapter.getSelectors(state => state.cars)

export default carSlice.reducer

这是我的第一页，我在其中渲染API中的所有载具

import React, { useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { fetchCars, selectAllCars } from '../features/car/carSlice'
import './car.css'

export default function Car() {
  const dispatch = useDispatch();
  const carStatus = useSelector(state => state.cars.status)
  const cars = useSelector(selectAllCars)

  useEffect(() => {
    if(carStatus === 'idle') {

      dispatch(fetchCars());
    }
  }, [dispatch, carStatus])

  return (
    <>
      {
        cars.map(car => {
          return (
            <div key={car.id} className="card">
              <img src={car.vehiclePhoto} alt="vehicle" className="vehicle-img" />
              <div className="card-container">
              <h4>{car.vehicleName}</h4>
              <p>{car.price}</p>
              <Link to={car.id}>Details</Link>
              </div>
            </div>
          )
        })
      }
    </>
  )
}

这是您尝试重新加载页面时出现的问题

export default function Car({ match: { params: { id } } }) {
    const state =  useSelector(state => state)
    const car = selectCarById(state, id);

  return (
    <div className="card">
    { car ? 
      <>
      <img src={car.vehiclePhoto} alt="vehicle" class="vehicle-img" />
      <div className="card-container">
        <h4>{car.vehicleName}</h4>
        <p>{car.price}</p>
      </div>
      </> : 'loading...'
    }
    </div>
    )
}

Answer 1

应用程序的每个页面都必须能够加载自己的数据。在显示单个汽车详细信息的页面上，您希望它查看状态，如果数据已经加载，则选择数据，如果数据尚未加载，则发送对数据的请求（例如当您转到该页面时）直接）。

您将要在单个汽车页面上使用与在主页上使用的API终结点不同的API终结点，因为您要从ID加载单个汽车的详细信息。 ID 123可能类似于import subprocess command = 'C:\\Python36\\python.exe C:\\Python36\\Scripts\\wmiexec.py TargetUser:TargetPassword@TargetHostname "ipconfig"' command = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE) stdout= command.communicate()[0] print (stdout)。

Answer 2

看最后一张图片，我认为第9行应该是

return selectCarById(state, id)

空的Redux存储区，useSelector不返回任何内容

2 个答案: