标签: react-async

从ReactJS外部渲染组件

"在React之外获取React Component实例句柄的唯一方法是存储React.render的返回值."

我需要在React之外渲染一个React组件,我将在下面提到它的原因.

在我的node.js,expressJS应用程序中,我使用'react-router-component'和'react-async'.

在app.js中 - 应该运行的文件,

    var url=require('url');   
    var App=require('./react/App.jsx');
    var app = express();
    app.get('*',function(req,res){


    //}); SEE EDIT 1 BELOW

    var path = url.parse(req.url).pathname;
                ReactAsync.renderComponentToStringWithAsyncState(App({path:path}),function(err, markup) {
    res.send('<!DOCTYPE html>'+markup);

          });
   });

Run Code Online (Sandbox Code Playgroud)

在App.jsx中,

   PostList = require('./components/PostList.jsx');
   var App = React.createClass({
   render: function() {
        return (

           <html>
           <head lang="en">
           </head>
        <body>
        <div id="main">

        <Locations path={this.props.path}>

          <Location path="/" handler={PostList} />
          <Location path="/admin" handler={Admin} />
        </Locations>


       <script type="text/javascript" src="/scripts/react/bundle.js"></script>
       <script type="text/javascript" src="/scripts/custom.js"></script>                 

        </body>
        </html>
        });

Run Code Online (Sandbox Code Playgroud)

bundle.js …

node.js express reactjs react-jsx react-async

Ist*_*med

2015 05-22

9
推荐指数

1
解决办法

6842
查看次数

React-Select Async loadOptions未正确加载选项

React Async Select loadoption有时无法加载该选项。在几个查询集合反应后，这是一个非常奇怪的现象。loadoptions未加载任何值，但我从日志中可以看到，结果正确地来自后端查询。我的代码库完全是最新的，请使用react-select新版本并使用

“反应选择”：“ ^ 2.1.1”

这是我的react-async select组件的前端代码。我确实在getOptions函数中使用了反跳，以减少后端搜索查询的数量。我猜这应该不会造成任何问题。我想补充一点，在这种情况下，我观察到的是，loadoptions serach指示器（...）也没有出现在这种现象中。

import React from 'react';
import AsyncSelect from 'react-select/lib/Async';
import Typography from '@material-ui/core/Typography';
import i18n from 'react-intl-universal';

const _ = require('lodash');

class SearchableSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      searchApiUrl: props.searchApiUrl,
      limit: props.limit,
      selectedOption: this.props.defaultValue
    };
    this.getOptions = _.debounce(this.getOptions.bind(this), 500);
    //this.getOptions = this.getOptions.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.noOptionsMessage = this.noOptionsMessage.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleChange(selectedOption) {
    this.setState({
      selectedOption: selectedOption
    });
    if (this.props.actionOnSelectedOption) {
      // this is for …

Run Code Online (Sandbox Code Playgroud)

asynchronous reactjs react-async react-select

Sha*_*kil

2018 10-30

6
推荐指数

3
解决办法

8211
查看次数

在异步调用完成后呈现部分 React 函数组件

我将 material-ui 与 React 功能组件一起使用并使用其自动完成组件。我自定义了它，每当我更改输入字段中的文本时，我希望该组件呈现新的搜索结果。

callAPI("xyz")

Run Code Online (Sandbox Code Playgroud)

我在 action 中调用 API 并使用 xyz 参数，我正在从这个函数组件调用 dispatch 方法。

这里的问题是，当组件进行调用时，它应该等待 API 响应然后呈现结果，但它得到了一个未解决的承诺，所以它无法呈现。

<Paper square>
    {callAPI("xyz").results.map(
        result => console.log(result);
    )}
</Paper>

Run Code Online (Sandbox Code Playgroud)

由于结果是一个未解决的承诺，它将无法映射。我需要某种方法来仅在数据可用时调用地图，或者在数据存在之前显示一些文本，然后在获取数据后进行更改。

任何纠正此代码的建议都将非常有帮助。

编辑：

function IntegrationDownshift() {
    return (
        <div>
            <Downshift id="downshift-simple">
                {({
                    getInputProps,
                    getItemProps,
                    getMenuProps,
                    highlightedIndex,
                    inputValue,
                    isOpen,
                    selectedItem
                }) => (
                    <div>
                        {renderInput({
                            fullWidth: true,
                            InputProps: getInputProps({
                                placeholder: "Search users with id"
                            })
                        })}

                        <div {...getMenuProps()}>
                            {isOpen ?
                                 <Paper square>
                                {callAPI(inputValue).users.map(
                                    (suggestion, index) =>
                                        renderSuggestion({
                                            suggestion,
                                            index,
                                            itemProps: getItemProps({
                                                item:
                                                    suggestion.userName
                                            }),
                                            highlightedIndex, …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-async material-ui react-component

bet*_*ers

2021 08-10

3
推荐指数

1
解决办法

3942
查看次数

React Redux - this.props.actions.fetchPosts不是一个函数

我有从我的组件调用异步操作的问题,我想我做了所有工作所需的一切,但似乎没有,我用过:

mapDispatchToProps

在里面我回来了

actions:bindActionCreators(fetchPosts,dispatch)

我连接它.

在所有这些事情之后,我尝试在我的组件中调用此操作 -

this.props.actions.fetchPosts()

结果我在控制台中收到此错误 -

this.props.actions.fetchPosts不是一个函数

我无法理解它的问题是什么,因为我做了所有事情,这里将是完整的来源:

零件

import React, { Component } from 'react';
import { Link } from 'react-router';
import styles from './Home.css';
import { fetchPosts } from '../actions/counter';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';


    class Home extends Component {

        constructor(props) {
            super(props)
        }
        render() {
                return (
                        <div>
                            <div className="container">
                                <div className="banner_animated">
                                    <p> dadasda</p>
                                </div>
                            </div>
                            <div className="container-fluid">
                                <div className="center">
                                    <input type="text"/>
                                    <button className="btn-2 btn-2a btn" …

Run Code Online (Sandbox Code Playgroud)

reactjs react-async react-redux react-thunk

Tru*_*lv1

lucky-day

2
推荐指数

1
解决办法

1万
查看次数