标签: react-redux

我需要知道如何编写代码以使用react-router通过onClick刷新页面

我尝试使用history.push，但不起作用。

这是我的代码：

  onClick() {
this.props.history.push(`/a/${this.props.a}`);
// window.location.reload();


}

      goPage() {
    return (
      <Button onClick={this.onClick}>
        Begin
      </Button>
    );
  }

如果有人知道，请建议我

谢谢

我有一个呈现 AgGrid 的组件。我将 rowCount 更新为此组件的状态，但是，我需要从显示此组件的容器中访问此数字（状态）

这是我的国家

class ClientOrderHistory extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: createColumnDefs(props.OrderHistoryReducer.columnDefs),
      gridAPI: null,
      displayedCount: 0
    };
  }

onGridReady，我更新了计算行数的函数

  onGridReady = params => {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
    this.setState({ gridAPI: params.api, columnAPI: params.columnApi });
    this.columnApi.autoSizeAllColumns();
    this.setState({displayedCount: this.gridApi.getDisplayedRowCount()});
    console.log('rowsCount', this.gridApi.getDisplayedRowCount());
  };

我可以验证它是否正常工作，因为我可以在 componentDidUpdate 上 console.log 状态，并在控制台中正确显示行数。我正在将此组件传递给另一个容器以显示此网格，但是，我希望将此 displayCount 状态作为容器中的文本输出。

我怎样才能做到最好？

嘿伙计们，我在 nextjs 中使用 redux thunk，现在我想在我的应用程序中添加 redux-persist。所以最初我的代码就像

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';

export const makeStore = (initialState, options) => {
    return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
};

任何人都可以帮助我只在 redux 的设置中坚持吗？我尝试了一些解决方案但没有解决

在一个屏幕上面对这个错误。虽然相同的 redux 配置适用于所有其他屏幕。

TypeError: (0 , _reactRedux.default) is not a function.(In'(0 , _reactRedux.default)(mapStateToProps,{})','(0 , _reactRedux.default)' is undefined)

我正在尝试设置，因此当我更改系统主题时，我的本机应用程序主题也应该更改。我使用了反应导航和反应原生外观。在应用程序启动时应用了正确的系统主题，但是当我第一次使用应用程序时更改主题时却没有。但是当我第二次尝试更改系统主题时，它也会更改应用程序主题并正常工作。

这是我的代码：-

应用程序.js

import React from 'react';
import {} from 'react-native';
import {AppearanceProvider} from 'react-native-appearance';
import Main from './main';

export default function App() {
  
  return (
    <AppearanceProvider>
        <Main/>
    </AppearanceProvider>
  );
}

主程序

import React, { useState,useEffect } from 'react';
import {} from 'react-native';
import {Appearance} from 'react-native-appearance';
import {DarkTheme,DefaultTheme,NavigationContainer} from '@react-navigation/native';
import Home from './home';

const myDarkTheme={
    ...DarkTheme,
    colors:{
        ...DarkTheme.colors,    
        text:"#fff",
        statusBarColor:"#000"
    }
  };
  
  const myLightTheme={
    ...DefaultTheme,
    colors:{
        ...DefaultTheme.colors,
        text:"#000",
        statusBarColor:"rgb(242, 242, 242)"
    }
  };



export default function Main(){
    const …

我有一个反应应用程序，用户可以在其中拖放左侧的文件，上传文件后，当您单击它时，您会看到文件的内容。我已将带有 pdf 扩展名的图像和文件渲染到应用程序中。我很困惑如何将 .doc 和 .text 文件渲染到 React 内置的 web apk 中。

有谁知道如何在 react app 中渲染 .doc 和 .txt 文件？

我想乘以{value.item.itemPrice}和{value.itemCount}分配给下一个<td></td>..我尝试使用{value.item.itemPrice}*{value.itemCount}但不起作用.请帮助我解决这个问题.我从 axios get API 调用中获取这些值。

                 <tbody>
                    {itemList.map((value, key) => (
                        <tr key={key}>
                            <td>{value.itemId}</td>
                            <td>{value.item.itemPrice}</td>
                            <td>{value.itemCount}</td>
                            <td>{value.item.itemPrice}*{value.itemCount}</td>   //not woring this
                        </tr>
                    ))}
                    <tr>
                        <td></td>
                        <td></td>
                        <td>Total</td>
                        <td>total here</td>
                    </tr>
                </tbody>

我最近开始在 React 中使用 Redux。我想知道如何对我刚刚获取的数据执行一些逻辑（这是一种不好的做法吗？），在同一个处理程序中我调用了 redux 操作。我附上一个简单的例子，所以你可以理解我的意思。

 function CakeContainer(props) {
   return (
      <div>
         <h2>Number of cakes - {props.numOfCakes}</h2>
         <button onClick={props.buyCake}>Buy Cake</button>
      </div>
   )

}

props.buyCake工作正常，它numOfCakes从 redux 状态中获取并将显示在组件中的值减 1。所以如果一numOfCakes开始的值是10，点击按钮后就是9。

例如，如果我想乘以numOfCake按钮处理程序内部的值怎么办？组件代码将是

function CakeContainer(props) {
   return (
      <div>
         <h2>Number of cakes - {props.numOfCakes}</h2>
         <button onClick={() => {
           props.buyCake();
           console.log("num multiplied by 2",props.numOfCakes*2)
         }}>Buy Cake</button>
      </div>
   )

}

在控制台日志中，第一次单击按钮后，我有 20 (10*2) 个，因为NumOfCakes尚未更新。有没有办法在处理程序中获得更新的值，还是一种不好的做法？

我是初学者，不知道 createSlice 和 createReducer 有没有区别。

我应该选择哪个？

其次，我今天看了一个教程。这家伙刚刚制作了一个 store.js 文件和一个 userslice.js 文件。很简单。

但是他使它与 redux 文档有点不同。他在 userSlice.js 的末尾导出了三个 CONST，而不是文档中的两个。（我已经发表评论了）如果我将 state.user.user 更改为 state.user.wtf ......我会在一段时间后运行错误，因为某些组件不再访问用户对象了。

用户切片

import { createSlice } from '@reduxjs/toolkit';



export const userSlice = createSlice({
  name: "user",
  initialState: {
    user: null,
  },
  reducers: {
    login: (state, action) => {

      state.user = action.payload;
    },

    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;

export const selectUser = (state) => state.user.user; // What is that …

我正在关注 react-testing-library 的文档，以查找具有data-testid属性的元素是否已呈现。

react-testing-library 无法找到该元素，即使它存在。

测试

test('Renders step based on the active step', () => {
    render(<RenderStep />, { initialState: { implOnboard: initialState } });
  });
  expect(screen.getByTestId('step-1')).toBeDefined(); //  THROWS ERROR ?
}

成分

 // redux
  const { activeStep } = useSelector((state) => state.implOnboard);

  const renderStep = () => {
    switch (activeStep) {
      case 1:
        console.log('Rendering this '); //  THIS IS GETTING LOGGED TOO!
        return (
          <div data-testid="step-1">
            <StepOne />
          </div>
        );
      case 2:
        return (
          <div data-testid="step-2">
            <StepTwo …