如何解决我无法在 useState 钩子中使用来自 redux 商店的数据来展示图像
enter image description here 此处的 singleCard 对象包含有关产品的所有详细信息,例如 id、title、src 等。我可以将 singleCard 控制台记录为 console.log(singleCard),其中显示从 redux store 传递的所有数据,但我无法访问其单个元素,如 singleCard.src 或 singleCard.title 。我想在 useState 钩子的帮助下通过将 initialState 设置为 singleCard.src 来展示图像,我该怎么做??
function Singlecard() {
const dispatch = useDispatch();
const { id } = useParams();
const productId = id;
const productDetails = useSelector((state) => state.productDetails);
const { loading,error,singleCard } = productDetails;
const [currentImg,setcurrentimg] = useState(singleCard.src);
console.log(currentImg);
useEffect(() => {
dispatch(detailsProduct(productId));
},[dispatch,productId]);
return (
<div>
<div className="singlecard-wrapper">
<div className="singlecard">
{/* card left */}
<div className="product-img">
<div className="img-display">
<div className="img-showcase">
<img src={currentImg} height="552px" width="552px" />
</div>
</div>
<div className="img-select">
<div className="img-item">
<Link to="#">
<img
src="https://instagram.fccu3-1.fna.fbcdn.net/v/t51.2885-15/e35/121105212_197680348436281_873870113726337107_n.jpg?tp=1&_nc_ht=instagram.fccu3-1.fna.fbcdn.net&_nc_cat=101&_nc_ohc=nsNxf_rVgeUAX9KUkp-&edm=AP_V10EAAAAA&ccb=7-4&oh=6b955579988a6dcbef129b3ad606fecd&oe=60918B32&_nc_sid=4f375e"
onClick={(e) => setcurrentimg(e.target.src)}
/>
</Link>
</div>
</div>
</div>
</div>
</div>
在 useState 中使用 singleCard.src 时,它显示无法读取 undefined 的属性“src”。请帮忙!
productAction:
export const detailsProduct = (productId) => async (dispatch) => {
dispatch({ type: PRODUCT_DETAILS_REQUEST,payload: productId });
try {
const response = await axios.get(`/cardUpload/${productId}`);
dispatch({ type: PRODUCT_DETAILS_SUCCESS,payload: response.data });
} catch (err) {
dispatch({
type: PRODUCT_DETAILS_FAIL,payload:
err.response && err.response.data.message
? err.response.data.message
: err.message,});
}
};
productReducer:
export const detailsProduct = (productId) => async (dispatch) => {
dispatch({ type: PRODUCT_DETAILS_REQUEST,});
}
};
商店:
import { applyMiddleware,combineReducers,compose,createStore } from "redux";
import thunk from "redux-thunk";
import {
productDetailsReducer,productListReducer,} from "./reducers/productReducers";
const initialState = {};
const reducer = combineReducers({
productList: productListReducer,productDetails: productDetailsReducer,});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,initialState,composeEnhancer(applyMiddleware(thunk))
);
export default store;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。