标签: react-redux

在我的react-redux表单中,我想重新打包一个必填字段,并禁用我的导航栏组件,直到重新验证回复,我发现一些类似的问题与javaScript但我无法用React应用它们,因为我是使用react-recaptcha插件:

  <div className="form_wrapper">
  <ReCAPTCHA
            sitekey="xxxxxxxxxxx"
            render="explicit"
            onloadCallback={this.callback}
            verifyCallback={this.verifyCallback}
          />
  </div>
  <NavigationBar
     fields={requiredFields}
    // disableNext={this.props} (here where i make conditions to disable)
    />

这是我的回调和verifyCallback方法:

  verifyCallback(response) {
     return response;
 }
 callback() {
console.log('Done !!');
}

谢谢

我添加了Hardik Modha建议的代码,如下所示,但仍有相同的问题:

 <NavigationBar
     fields={requiredFields}
     disableNext={this.props ... && !this.validateForm()} 
    />

 verifyCallback(response) {
this.setState({
  reCaptchaResponse: response,
});
 }

 validateForm() {
if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
  return false;
}
return true;
 }

在我的启动中,我将一些变量加载到我在Redux的全局存储中,包括填充一个名为"outputList"的数组

在我的一个组件中,当我运行它时,即使我在渲染之前尝试错误检查数据,它在加载时仍然会闪烁红色说明:

未捕获的TypeError:无法读取未定义的属性"长度"

一旦它在1或2秒后收到数据,它就会正确加载.显然这是不可接受的.它从中接收数据的API也是同步的.

在我的组件中,我有以下内容.它显示"它有效!" 只有在浏览器闪烁后才会出错,大喊大叫该属性长度未定义的消息.

我怎样才能解决这个问题？感谢您的任何帮助

renderContent() {
  if (this.props.outputList.length > 0) {
    return (<span>it worked!</span>);
  }
  else {
    return (<span>did not work</span>);
  }
}

render() {
  return (
    {this.renderContent()}
  );
}

编辑:

在renderContent()中,我根据请求添加了console.log(this.props.outputList).我得到2个日志

第一个日志:一个空数组第二个日志:一个填充数组

对不起我不认为你真的需要我发布实际的数组数据吗？

因此，我一直在努力弄清react-redux生态系统。我快到了，但是仍然有一些问题一直困扰着我，那就是componentDidUpdate方法。当我调度一个异步操作时，将正确调用store is reducer，并且组件的状态也会更新。

但是由于某种原因，componentDidUpdate方法不会触发，没有重新渲染，并且我无法访问更新的道具。如果我console.log（this.props.blogStore），我可以在devtools中看到它的变化。最初，它显示为空对象，但是单击时会打开并显示更新状态。

我已经尝试了尽可能多的生命周期方法，但是似乎没有任何效果，包括componentWillReceiveProps。

知道我在做什么错吗？

这是代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './App';
import Datastore from 'Datastore';

const store = Datastore()

store.subscribe(() => console.log("state changed", store.getState()))

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app')
);

数据存储区

import { combineReducers, createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'

import Mainmenu from 'reducers/Mainmenu';
import Blogstore from 'reducers/Blogstore';

const reducer = combineReducers({
    Mainmenu,
    Blogstore,
})

export default function Datastore() { …

我想在用户提交表单时设置表单加载状态（旋转图标，禁用输入），并在操作完成或失败时清除该状态。当前，我将这种状态存储在我的商店中，这涉及创建动作创建者和简化器，由于以下几个原因，这很烦人：

1. 不仅仅是打电话，还需要做更多的工作 this.setState
2. 很难推理
3. 我真的不想在我的商店中存储本地组件状态

本质上，我想在表单组件中执行此操作：

handleFormSubmitted() {
  this.setState({ isSaving: true })
  this.props.dispatchSaveForm({ formData: this.props.formData })
    .finally(() => this.setState({ isSaving: false }))
}

我有这个简单的代码：

    class App extends Component {

        render() {
            return (
                <div>
                    <PanelPayment />
                </div>
            );
        }
    }
    export default App

和这个：

export default class PanelPayment {
    render() {
        return (
            <div>
                <button>Pay now!</button>
            </div>
        )
    }
}

而且我得到了错误：

TypeError：无法将类作为函数调用

class.App.js:66 Uncaught TypeError: Cannot call a class as a function
at _classCallCheck (class.App.js:66)
at PanelPayment (class.PanelPayment.js:3)
at ReactCompositeComponent.js:305
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
at Object.mountComponent (ReactReconciler.js:45)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
at ReactDOMComponent.mountComponent …

这是clock.js我的React应用的一个文件（）

class Clock extends Component { ...
...}
export default Clock;

这是我要导入Clock组件的另一个地方

import Clock_1 from './clock/clock';
...
<Route exact path="/clock" component={Clock_1} />

如您所见，我以Clock的名称导出了它，并以Clock_1的名称导入了它，但它仍在编译并成功运行。为什么？

PS: Apologies beforehand if this question sounds lame/ too simple/ stupid. I'm a beginner.

我使用react native和redux作为以下(工作):

App.js

export default class App extends React.PureComponent {
  constructor (props) {
    super(props);

    this.state = { ...store.getState()};
    store.subscribe(() => {
      // i can read the state but no write it
      const storestate = store.getState();       
    });
  }

  handleConnectivityChange = isConnected => {
    this.setState({ isConnected });
  };

  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<ActivityIndicator />}
          persistor={persistor}>

          <View style={{ flex: 1, marginTop: Config.marginTop }}>
            <StackView />

          </View>
        </PersistGate>
      </Provider>
    );
  }
}

ScreenX.js

import * as actions from "./redux/actions";
import { …

我不确定是否有人尝试过使用框架7反应模板的redux,但我认为这是一个更普遍的错误.我成功安装并运行了framework 7 react模板,然后我想尝试redux.我安装了redux,react-redux并尝试将redux网站中的todoList示例集成到同一个模板中.我得到一些文件意外的字符错误,我不知道为什么会发生这种情况.

我试图在导入或删除时删除括号; 导入行结束但没有改变任何东西.我直接从redux网站复制并粘贴代码,也许是一些隐藏的字符问题,我该如何测试并摆脱它？

./src/components/Footer.js语法错误:D:\ client\src\components\Footer.js:意外的字符''(4:0)

import React from 'react'
import FilterLink from '../containers/FilterLink'
import { VisibilityFilters } from '../actions'
?
const Footer = () => (

./src/reducers/index.js语法错误:D:\ client\src\reducers\index.js:意外字符''(5:0)

import { combineReducers } from 'redux'
import todos from './todos'
import visibilityFilter from './visibilityFilter'

?export default combineReducers({

嗨,我有以下基于React-Redux的代码剪断,不明白以下行:

const List = connect(mapStateToProps)(ConnectedList);

我会理解一个函数被分配给List常量,如果它看起来像:

const List = connect(mapStateToProps);

但是这个声明中的(ConnectedList)会产生什么影响？发生了什么的技术名称？

完全剪断:

import React from "react";
import { connect } from "react-redux";
const mapStateToProps = state => {
  return { articles: state.articles };
};
const ConnectedList = ({ articles }) => (
  <ul className="list-group list-group-flush">
    {articles.map(el => (
      <li className="list-group-item" key={el.id}>
        {el.title}
      </li>
    ))}
  </ul>
);
const List = connect(mapStateToProps)(ConnectedList);
export default List;

在我的create-react-app / redux中，我有一个“连接的组件”：

import React from "react";
import "./App.css";
import { connect } from "react-redux";

function App() {
  debugger;
  const { datas } = this.props;

  debugger;
  return <div className="App">{datas}}</div>;
}

const mapStateToProps = state => {
  return {
    datas: state
  };
};

// const mapDispatchToProps = dispatch => {
//   return {
//     onRequestDog: () => dispatch({ type: "API_CALL_REQUEST_POST" })
//   };
// };

export default connect(
  mapStateToProps,
  {}
)(App);

Redux在index.js中配置：

import React from 'react';
import ReactDOM from 'react-dom';
import …