react-redux 工具包应用程序在尝试将 redux 数据导入组件时出现问题

Posted 2023-02-19

【中文标题】react-redux 工具包应用程序在尝试将 redux 数据导入组件时出现问题

【英文标题】：react- redux toolkit app issue when trying to get redux data into component

【发布时间】：2021-06-17 17:04:09

【问题描述】：

我正在尝试将 redux 数据添加到组件中，当我尝试检查 redux 数据时，我在 console.log 中遇到了以下问题，有人可以帮助我吗

我的 redux 切片在下面。请检查粗体线，它似乎导致问题不知道为什么会发生

import  createSlice  from '@reduxjs/toolkit';
import alladds from '../auth/ads.json'

export const addsSlice = createSlice(
    name: 'adds',
    initialState: 
        alladds: alladds
    ,
    reducers: 
        addalladds: state => 
            state.alladds = alladds
        ,
        
    ,
);

export const  addalladds  = addsSlice.actions;

export const selectAddSlice = state => state.addsSlice.alladds

export default addsSlice.reducer;

这是我的反应组件

import React,useState, useEffect from "react";
import   useSelector  from 'react-redux';
import selectAddSlice from './features/auth/addsSlice'
const Addtocart = () => 
    
     const selectAddSlice1 = useSelector(selectAddSlice);
     const [alladd, setAlladds] = useState(selectAddSlice1)
   
    useEffect(() => 
       console.log(selectAddSlice + "ffffff")
    ,)

  return (
    <div>
      alladd.map((add) => (
        <div key=add.id>
          <div> add.addname</div>
          <div> add.price</div>
        </div>
      ))
    </div>
  );
;

export default Addtocart;

这是redux中的json数据 [ “添加名称”：“正常添加”， “价格”：“23”， “身份证”：“1” , "addname": "advancedadd", “价格”：“50”， “身份证”：“2” , "addname": "premiumadd", “价格”：“100”， “身份证”：“3”

]

【参考方案1】：

你不需要复制 Redux Store 数据到 React 本地状态，你可以直接在组件的任何地方使用selectedAdds。每当 Redux Store 中的数据发生变化时，组件都会重新渲染。

const selectedAdds = useSelector(selectAddSlice)

// This is not required
// const [alladd, setAlladds] = useState(selectedAdds)

useEffect(() => 
  console.log(selectedAdds)
, [selectedAdds])
// If you want to see this log, put selectedAdds in dependency array
// So that the Hook will run whenever selectedAdds is changed

return (
  <div>
    selectedAdds.map((add) => (
    ...

但如果你真的需要将 Redux 数据复制到本地状态，你可以使用 useEffect:

const [alladd, setAlladds] = useState([]) // Line 1

useEffect(() => 
  setAlladds(selectedAdds) 
  // Set in State whenever selectedAdds is changed; Not 
  // just once at the Line 1 (as initial value of state)
, [selectedAdds])

return (
  <div>
    alladd.map((add) => (
    ...