自定义组件未在此基本 ReactJS 应用程序上正确呈现 [英] Custom component not getting rendered properly on this basic ReactJS app

查看：34
本文介绍了自定义组件未在此基本 ReactJS 应用程序上正确呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个非常基本的 ReactJS 应用程序，它使用 Redux 包含以下组件:

PanelMaterialSize >选择

/src/controls/PanelMaterialSize/PanelMaterialSize.js

import React, { Component } from 'react';从'react-redux'导入{连接}；导入'./PanelMaterialSize.scss';导入从../选择/选择"中选择；import { setThemeList } from '../../store/AppConfig/actions';类 PanelMaterialSize 扩展组件 {componentDidMount() {this.n = 1;setInterval(() => {让主题列表 = [{ value: this.n, text: 'Option' + this.n },{ value: this.n + 1, text: 'Option' + (this.n + 1) },{ value: this.n + 2, text: 'Option' + (this.n + 2) },];this.props.setThemeList(themeList);this.n += 3;}, 1000);}使成为() {返回 (<div className="partial-designer-panel-material-size"><div><div className="label-input"><div className="label">MATERIAL</div><div className="输入"><选择数据={this.props.themeList} style={{ width: '100%' }}/>

);}}const mapStateToProps = (appState) =>{返回 {主题列表:appState.appConfig.themeList，}}const mapDispatchToProps = (调度) =>{返回 {setThemeList: (themeList) =>调度(设置主题列表(主题列表))，}}导出默认连接(mapStateToProps，mapDispatchToProps)(PanelMaterialSize)；

在我看来 Redux 逻辑很好，因为我已经通过做几件事进行了测试.

我的问题是当PanelMaterialSize的render(...)方法被调用时，组件:Select 不会使用新数据(每秒钟更改一次)进行渲染.

这里有一个 Codesandbox.io 可以玩(最好使用 Chrome):

https://codesandbox.io/s/03mj405zzv

知道如何正确更改其内容吗?

如果可能，请提供一个新的 Codesandbox.io 和您的解决方案，从前一个分叉出来.

谢谢！

解决方案

问题出在您的选择组件中.您最初传递的是空数组并使用 this.state.data 道具检查您的组件，下次减速器更改您的 this.state.data 将不会更新数据.因为你在构造函数中初始化.构造函数只在组件挂载时调用一次.

解决演示链接

问题在于您的选择渲染方法:

 render() {让数据 = this.state[this.name];返回 (<div className="control-select" {...this.controlProps}><div className="custom-dropdown custom-dropdown--grey"><select className="custom-dropdown__select custom-dropdown__select--grey">//用this.props.data改变数据{this.props.data.length >0 &&this.props.data.map((elem, index) => {返回 (<option value={elem.value} key={index}>{元素.文本}</选项>);})}</选择>

);}

I have a very basic ReactJS app which uses Redux which contains the following components:

PanelMaterialSize > Select

/src/controls/PanelMaterialSize/PanelMaterialSize.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './PanelMaterialSize.scss';
import Select from '../Select/Select';
import { setThemeList } from '../../store/AppConfig/actions';

class PanelMaterialSize extends Component {

  componentDidMount() {
    this.n = 1;
    setInterval(() => {
      let themeList = [
        { value: this.n, text: 'Option ' + this.n },
        { value: this.n + 1, text: 'Option ' + (this.n + 1) },
        { value: this.n + 2, text: 'Option ' + (this.n + 2) },
      ];
      this.props.setThemeList(themeList);
      this.n += 3;
    }, 1000);
  }

  render() {
    return (
      <div className="partial-designer-panel-material-size">
        <div>
          <div className="label-input">
            <div className="label">MATERIAL</div>
            <div className="input">
              <Select data={this.props.themeList} style={{ width: '100%' }} />
            </div>
          </div>
        </div>
      </div>
    );
  }

}

const mapStateToProps = (appState) => {
  return {
    themeList: appState.appConfig.themeList,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setThemeList: (themeList) => dispatch(setThemeList(themeList)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PanelMaterialSize);

In my opinion the Redux logic is fine because I have tested by doing couple of things.

My problem is that when the render(...) method of: PanelMaterialSize gets called, the component: Select doesn't get rendered with the new data (which changes every one second).

Here you have a Codesandbox.io you can play with (preferable use Chrome):

https://codesandbox.io/s/03mj405zzv

Any idea on how to get its content changed properly?

If possible, please, provide back a new Codesandbox.io with your solution, forked from the previous one.

Thanks!

解决方案

the problem is here in your select component. you are passing initially empty array and checking your component with this.state.data props, next time reducer change your this.state.data will not update the data. because you initialize in constructor. constructor only invoke once when component mount.

SOLVED DEMO LINK

The Problem is in your select render method:

  render() {
    let data = this.state[this.name];
    return (
      <div className="control-select" {...this.controlProps}>
        <div className="custom-dropdown custom-dropdown--grey">
          <select className="custom-dropdown__select custom-dropdown__select--grey">
             //change data with this.props.data
            {this.props.data.length > 0 &&
              this.props.data.map((elem, index) => {
                return (
                  <option value={elem.value} key={index}>
                    {elem.text}
                  </option>
                );
              })}
          </select>
        </div>
      </div>
    );
  }

这篇关于自定义组件未在此基本 ReactJS 应用程序上正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆