标签: react-redux

我正在尝试过滤我的数据以显示我的减速器并在第一次渲染中工作。但是，当我尝试使用分页更改页面时出现此错误：

× 重新渲染过多。React 限制渲染次数以防止无限循环 dispatch(GetFilteredData());

当我检查控制台时，我得到了 的无限循环console.log(data2)，但我不知道为什么会这样。

这是我的派遣工作 PaisBody.js

import React, { useState, useEffect } from 'react';
import {useSelector,useDispatch} from 'react-redux';
import TablePagination from 'Layout/Table/TablePagination';
import {InsertPageCount,InsertData,GetFilteredData} from 'Redux/Actions/Pagination';
import GetApi from 'Url/index';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import allReducers from 'Redux/Reducers/Pagination';
import {TableFilter} from 'Layout/Table/TableFilter';



const PaisBody = (props) => {

  const dispatch = useDispatch();
  dispatch(InsertData(props.data));
  dispatch(InsertPageCount(props.data.length));

  dispatch(GetFilteredData());

  const CurrentPage = useSelector(state => state.CurrentPage.page);
  const data2 = useSelector(state => state.CurrentPage.filteredData);

  console.log(data2);



  return (
    <div> …

以下是下面的代码，现在我想在同一个组件中更改 name 的值？我如何实现这一目标？

render(){
return(
<div>
<p>{this.props.name}</p>
</div>
)
}

我有一个显示卡片列表的组件。我正在尝试对表格行进行排序，但遇到了一些问题。当我转到页面时，出现以下错误：

错误：重新渲染过多。React 限制渲染次数以防止无限循环。

它指向这条线

setData(_.sortBy(filteredData.reverse()));

这是我的完整组件代码。任何人都可以看到我正在尝试做的事情有问题吗？

import React, { useState } from "react";
import Search from "./Search";
import TimeAgo from "react-timeago";
import { useSelector, useDispatch, connect } from "react-redux";
import { Table } from "semantic-ui-react";
import { searchChange } from "../reducers/searchReducer";
import _ from "lodash";
// import { useField } from "../hooks";

const searchCards = ({ baseball, search }) => {
  return search
    ? baseball.filter(a =>
        a.title[0].toLowerCase().includes(search.toLowerCase())
      )
    : baseball;
};

const Cards = props => {
  const [column, setColumn] …

我有一个名为的组件Home，它看起来像：

  render () {
    const clips = ObjectPath.get(this.props, 'search.data.clips.results', [])

    return (
      <div className='search__container right-content-wrapper'>
        <SearchInput
          value={this.props.autocomplete.query.q}
          placeholder='Search all the Vidys'
          status={this.props.autocomplete.status}
          hints={this.props.autocomplete.data}
          onType={this.props.onAutocomplete}
          onSubmit={this.props.onSearch}
        />

        <SearchResults
          results={clips}
          location={this.props.location}
          status={this.props.search.status}
        />
      </div>
    )
  }

我的SearchInput样子：

  render () {
    const { value, hints, status } = this.props
    const hasResults = hints.length
    const areResultsVisible = hasResults && !this.state.hideAutocompleteResults && this.state.hasFocus

    return (
      <div className= {`search-input__component ${status}`}>

        {this.props.showLogo && (
          <a href="javascript:void(0);" className="logo-on-search"></a>
        )}

        <div className='input'>
          <input
            type='text'
            className='input-field' …

我在组件中注册了componentWillReceiveProps事件.正如在文档中所解释的那样,我在生命周期的更新阶段期间在此事件中监听nextProps.

但记录nextProps的值返回undefined - "Chart.js?5478:88 Uncaught TypeError: Cannot read property 'dashboards' of undefined"

如果我赋值,this.props.dashboards我可以看到数据存在.但价值观并不是最新的.这就是我倾听的原因nextProps.dashboards.

题:

为什么componentWillReceiveProps中的nextProps参数返回undefined？

这是Chart.js文件的要点,我在其中监听仪表板和currentDashboard道具的更新:

import React, { Component } from 'react';
import { connect } from 'react-redux';    
import Spinning from 'grommet/components/icons/Spinning';
import Heading from 'grommet/components/Heading';
import drawing from '../chartLib/';



 class Chart extends Component {
    constructor (props) {
        super(props);
        this.state = {data: [], loading: true};
    }


    componentWillReceiveProps ({ blockName, subcatName, nextProps }) {

        if(nextProps.dashboards)  //this check for nextProps.dashboards returns: "Chart.js?5478:88 Uncaught TypeError: Cannot …

我尝试阅读有关 JS 和 React 的书籍和视频，但我仍然对 React-Props & States 没有更好的理解。有人可以详细解释我。

我想将参数传递到自定义 Redux 中间件中。但我不知道如何在自定义中间件中使用参数。

例子：

import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';

const customMiddleWare = store => next => action => {
  // how to use argument here?
};

const middlewares = [customMiddleWare(argument)];

const store = createStore(
  reducers,
  applyMiddleware(...middlewares)
);

您好，我正在尝试redux从给定的数据中获取存储的初始数据api！

这是我使用的第一种方法store.dispatch：

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import reducer from "./reducer";
import { fetchNews } from "./actions";

const store = createStore(
    reducer,
    compose(
        applyMiddleware(thunk),
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
            window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

store.dispatch(fetchNews());

export default store;

第二种方法是从组件生命周期方法分派操作，如下所示：

import React from "react";
import axios from "axios";
import InfiniteScroll from "react-infinite-scroller";
import { useSelector, useDispatch } from "react-redux";
import New from "./New";
import { fetchNews } from "../store/actions";

const Main = () …

我正在使用 React-redux，在这里我编写了一个演示： 演示 ，我的问题是我需要在收到状态更改后执行一些操作，例如刷新页面。但我不知道如何订阅商店的状态变化。

谁能帮我？

我一直在尝试在反应本机应用程序上导航到具有不同参数的同一屏幕。这是一个类别屏幕，我不希望用户返回并选择不同的类别来查看产品。我制作了一个屏幕，显示类别中的产品。

下面是我的代码：

  <View style={styles.horizontalSlider}>
         <FlatList
               horizontal
               showsHorizontalScrollIndicator={false}
               data={this.state.DataSource}
               keyExtractor={(item, index) => index.toString()} 
               extraData={this.state.selectedItem}
               renderItem= { ({item}) => (
                <TouchableOpacity onPress={(category) => navigate.push('CategoryScreen', {item})}>
                <ImageBackground style={styles.profileImgContainer} >
                <Image source={{ uri: item.images }} style={[styles.profileImg, , { borderColor: 'green', borderWidth:2 }]} />  
                </ImageBackground>
                </TouchableOpacity>
               )}
               />
            </View>

我没有在附近完成,但当我尝试npm开始这个项目我得到错误:

 Unexpected token, expected ;

  2 |
  3 |
> 4 | const App = fucntion() {
    |                        ^
  5 |   return <div>HI!</div>;
  6 | }
  7 |

这是index.js的完整文件:

import React from 'react';


const App = fucntion() {
  return <div>HI!</div>;
}



//shove into dom (page)
React.render(App);

什么是存储,调度,有效负载,类型,动作,连接,thunk,reducer in react redux ??

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
const store = createStoreWithMiddleware(reducer)
ReactDOM.render(
 <MuiThemeProvider muiTheme={muiTheme}>
   <Provider store={store}>
       <Router history={ browserHistory }>
         <Route path="/" component={ Content }/>
         <Route path="/filter" component={ Filter }/>
         <Route path="/details" component={ Details }/>
       </Router>
   </Provider>
 </MuiThemeProvider>,
   document.getElementById('root')
)