从react redux得到的组件中的渲染数据

Question

我是react的新手，正在从redux中获取数据并在组件中渲染。

问题是，我在CarAction.js文件中使用Axios调用API，并在CarReducer.jsdiv中的InspectionFom.js文件中呈现数据。我已经在控制台中获取数据了，现在只想在表中渲染。

这是InspectionFom.js文件的代码，我想在其中将数据呈现在表中，并且我有一个导入的CarAction.js

import { CarAction } from "../../Store/Actions/CarAction";
import { useDispatch, useSelector } from "react-redux";

const InspectionsForm = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(CarAction.getInspectedCar());
}, [dispatch]);

return (
<div>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>Fields</th>
<th>Original</th>
<th>Repaint</th>
<th>PR</th>
<th>N/C</th>
</tr>
</thead>
<tbody>
{fieldItems.map((item) => {
return (
<tr>
<td>{item.name}</td>
<td>
<Form.Check
className="radio-size"
type="radio"
aria-label="radio 1"
value="original"
name="field"
/>
</td>
<td>
<Form.Check
className="radio-size"
type="radio"
aria-label="radio 1"
value="repaint"
name="field"
/>
</td>
<td>
<Form.Check
className="radio-size"
type="radio"
aria-label="radio 1"
value="PR"
name="field"
/>
</td>
<td>
<Form.Check
className="radio-size"
type="radio"
aria-label="radio 1"
value="N/C"
name="field"
/>
</td>
</tr>
)
})}

</tbody>
</table>
</div>

);

};

这是CarAction.js的代码

export const CarAction = {
getInspectedCar() {
try {
return (dispatch) => {
return axiosInstance
.post(`user/carRequest/getCarInspectionDetail/1`)
.then((res) => {
if (res.data.status === "success") {
console.log("Successfull Inspection", res.data.data);
return dispatch({
type: Constant.getCarInspectionDetails,
payload: res.data.data,
});
}
})
.catch((error) => {
console.log("Unsuccessfull Inspection", error);
});
};
} catch (e) {
console.log("Exception Car Action", e);
}
},
}

这是CarReducer.js:的代码

const INITIAL_STATE = {
getcarinspectiondetails: []
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case Constant.getCarInspectionDetails:
return {
...state,
getcarinspectiondetails: action.payload
}
default:
return state;
}
};

Answer 1

看起来您缺少从存储中提取数据的功能。由于您使用的是功能组件，因此可以使用react-redux中的useSelector挂钩。

useSelector"；允许您使用选择器函数从Redux存储状态中提取数据">

import { useDispatch, useSelector } from 'react-redux';
const InspectionsForm = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(CarAction.getInspectedCar());
}, [dispatch]);
// Select the getcarinspectiondetails state
const fieldItems = useSelector(
state => state.carReducer.getcarinspectiondetails // *
);
return (
<div>
<div className="table-responsive">
<table className="table">
<thead>
...
</thead>
<tbody>
{fieldItems.map((item) => {
return (

*注意：这是假设您的carReducer在合并为您的状态的根。您的实际状态结构可能不同。