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

【问题标题】：react- redux toolkit app issue when trying to get redux data into componentreact-redux 工具包应用程序在尝试将 redux 数据导入组件时出现问题
【发布时间】：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” }

]

【问题讨论】：

标签： reactjs redux ecmascript-6 react-redux redux-toolkit

【解决方案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) => (
    ...

【讨论】：