Reactjs 重新渲染react redux组件_Reactjs_Redux_Local Storage

Reactjs 重新渲染react redux组件

reactjs redux

Reactjs 重新渲染react redux组件,reactjs,redux,local-storage,Reactjs,Redux,Local Storage,我正在使用react-redux代码结构，这是我第一次尝试使用react-redux。我克隆了一个github存储库并开始编辑它我的目录结构：在这里，模式是父组件，头和表是两个子组件。表通过redux store显示来自localstorage的数据初始化存储： const initialState = JSON.parse(window.localStorage.getItem('test')); const store = createStore(Reducers, initia

我正在使用react-redux代码结构，这是我第一次尝试使用react-redux。我克隆了一个github存储库并开始编辑它

我的目录结构：

在这里，模式是父组件，头和表是两个子组件。表通过redux store显示来自localstorage的数据

初始化存储：

 const initialState = JSON.parse(window.localStorage.getItem('test'));
 const store = createStore(Reducers, initialState, compose(applyMiddleware(...middleware), extension));

class Schema extends PureComponent {
constructor(props) {
    super(props);
    this.table = ''; 
    getTables();       
}
myCallback = () => {//triggered by child(Header)
   getTables();       
}
getTables = () => {
  axios.get(url)
        .then((response) => {
            if(response.data.status==0){ 
 window.localStorage.setItem('test',JSON.stringify(response.data));
   this.tables=JSON.parse(window.localStorage.getItem('test'))
    });
}
render() {
 console.log(this.tables);//this is giving updated value at each updation
    return (
        <div className='container-fluid'>
            <Header callbackFromParent={ this.myCallback } />
            <br />
            <br />
            <Tables val={ this.tables } />
        </div>
    );
  }
}

   class Tables extends Component {
   props: Props
   render() {
   let {tables,val } = this.props;
   console.log(JSON.parse(window.localStorage.getItem('test')));//this is giving updated value at each updation in localstorage
   console.log(val);//this is also giving updated value at each updation in localstorage
   tables=val;
   console.log(tables);this is also updating in realtime.      
   return (
        <div className='table-wrapper'>
            { tables.map((table) => (
                <Table
                    key={ table.id }
                    data={ table }
                />
            ))}
        </div>
       );
     }
   }

   type Props = {
     tables: Array<TableType>
   };

现在，从标头触发一个事件并将其发送到架构，在此事件的响应中，架构通过向服务器发出请求并将服务器的响应保存在localstorage中来更新localstorage，如下所示：

Schema.js:

 const initialState = JSON.parse(window.localStorage.getItem('test'));
 const store = createStore(Reducers, initialState, compose(applyMiddleware(...middleware), extension));

class Schema extends PureComponent {
constructor(props) {
    super(props);
    this.table = ''; 
    getTables();       
}
myCallback = () => {//triggered by child(Header)
   getTables();       
}
getTables = () => {
  axios.get(url)
        .then((response) => {
            if(response.data.status==0){ 
 window.localStorage.setItem('test',JSON.stringify(response.data));
   this.tables=JSON.parse(window.localStorage.getItem('test'))
    });
}
render() {
 console.log(this.tables);//this is giving updated value at each updation
    return (
        <div className='container-fluid'>
            <Header callbackFromParent={ this.myCallback } />
            <br />
            <br />
            <Tables val={ this.tables } />
        </div>
    );
  }
}

   class Tables extends Component {
   props: Props
   render() {
   let {tables,val } = this.props;
   console.log(JSON.parse(window.localStorage.getItem('test')));//this is giving updated value at each updation in localstorage
   console.log(val);//this is also giving updated value at each updation in localstorage
   tables=val;
   console.log(tables);this is also updating in realtime.      
   return (
        <div className='table-wrapper'>
            { tables.map((table) => (
                <Table
                    key={ table.id }
                    data={ table }
                />
            ))}
        </div>
       );
     }
   }

   type Props = {
     tables: Array<TableType>
   };

类模式扩展了PureComponent{
建造师（道具）{
超级（道具）；
这个表=“”；
getTables（）；
}
myCallback=（）=>{//由子项（头）触发
getTables（）；
}
getTables=（）=>{
获取（url）
。然后（（响应）=>{
如果（response.data.status==0）{
setItem（'test'，JSON.stringify（response.data））；
this.tables=JSON.parse（window.localStorage.getItem（'test'））
});
}
render（）{
console.log（this.tables）；//这是在每次更新时提供的更新值
返回(




);
}
}

下面是Tables.js的代码：

 const initialState = JSON.parse(window.localStorage.getItem('test'));
 const store = createStore(Reducers, initialState, compose(applyMiddleware(...middleware), extension));

class Schema extends PureComponent {
constructor(props) {
    super(props);
    this.table = ''; 
    getTables();       
}
myCallback = () => {//triggered by child(Header)
   getTables();       
}
getTables = () => {
  axios.get(url)
        .then((response) => {
            if(response.data.status==0){ 
 window.localStorage.setItem('test',JSON.stringify(response.data));
   this.tables=JSON.parse(window.localStorage.getItem('test'))
    });
}
render() {
 console.log(this.tables);//this is giving updated value at each updation
    return (
        <div className='container-fluid'>
            <Header callbackFromParent={ this.myCallback } />
            <br />
            <br />
            <Tables val={ this.tables } />
        </div>
    );
  }
}

   class Tables extends Component {
   props: Props
   render() {
   let {tables,val } = this.props;
   console.log(JSON.parse(window.localStorage.getItem('test')));//this is giving updated value at each updation in localstorage
   console.log(val);//this is also giving updated value at each updation in localstorage
   tables=val;
   console.log(tables);this is also updating in realtime.      
   return (
        <div className='table-wrapper'>
            { tables.map((table) => (
                <Table
                    key={ table.id }
                    data={ table }
                />
            ))}
        </div>
       );
     }
   }

   type Props = {
     tables: Array<TableType>
   };

类表扩展组件{
道具：道具
render（）{
设{tables，val}=this.props；
console.log（JSON.parse（window.localStorage.getItem（'test'））；//这将在localStorage中的每次更新中提供更新值
console.log（val）；//这还提供了localstorage中每次更新时的更新值
表=val；
log（表）；这也是实时更新的。
返回(
{tables.map（（table）=>(
))}
);
}
}
类型道具={
表：数组
};

问题是每当标头触发回调时，架构更新localstorage的值，此更新也会重新呈现Tables组件。此外，在render of Tables组件中可以看到更新的值，但显示的表是以前保存的值。要获取表中的当前值，我们需要刷新页面

这是代码流中的一个错误，还是我需要其他东西来解决这个问题？

这个想法是，只要组件

状态或道具更新，react就会触发组件的呈现
如果在父组件中更新了组件道具
，则仍然需要更新组件状态
，以便在内部组件中进行下一次渲染
关键是使用组件willreceiveprops

我用以下代码更新了您的代码：
基本上，我做了以下工作：
1-我为模式
、表格
、和表格

2-每当我需要对状态进行更新时，我都会使用this.setState
（这非常重要）
3-我确保在父级中更新组件props
时，我也会使用componentWillReceiveProps
更新组件状态，这将使用更新的数据进行新渲染
架构组件：
class Schema extends Component {
    constructor(props) {
        super(props);
        this.state = { tables : { } }
        this.getTables = this.getTables.bind(this);
        this.myCallback  = this.myCallback.bind(this);
    }

    componentWillMount(){
        this.getTables();
    }


    myCallback = () => {
       //triggered by child(Header)
       this.getTables();
    }


    getTables = () => {
      axios.get(url)
      .then((response) => {
            if(response.data.status==0)
            {
                window.localStorage.setItem('test',JSON.stringify(response.data));
                this.setState({
                    tables : JSON.parse(window.localStorage.getItem('test'))
                });
            }
        );
    }


    render() {
        //this is giving updated value at each updation
        console.log(this.state.tables);
        return (
            <div className='container-fluid'>
                <Header callbackFromParent={ this.myCallback } />
                <br />
                <br />
                <Tables tables={this.state.tables} />
            </div>
        );
    }
}

重要编辑：
如反应文档>代码>组件将被调用，即使道具没有改变，这也就是为什么在某些情况下，你可能需要考虑比较<代码>这个。道具 > <代码> NEXPROPS >以确保你确实得到了新的更新<代码>道具< /代码>，并在此基础上更新COMP。onent
状态
…
注意：这个问题还与我的问题有关，即更新本地存储不是更新组件。不确定这是否与您的问题直接相关，但我建议您不要执行ajax请求（getTables（）；
）在构造函数中
并在componentDidMount
中执行它们。尝试了此操作，但不起作用。我认为需要在Tables组件中进行更改/修复。您的表和架构组件是如何重新呈现的？道具或状态没有变化。确实，表的值在呈现后发生了变化，这是issue.我想重新渲染它。如何实现此目标？Thanx获得详细答案。我尝试了此解决方案。现在，schema.s中的this.state.tables正在更新，并且它也会从tables.js触发componentWillReceiveProps。但是这里的nextProps给出了与之前相同的值。意味着每次发生更改时都会调用componentWillReceiveProps，但不会更新v值。我尝试过的另一件事是，我在ComponeneTwillReceiveProps中直接给出了localstorage值。现在在render方法中，它每次都给出更新的值，但渲染的组件仍然给出以前的值。这与状态更新之前返回的render相同。欢迎您使用….componentWillReceiveProps
可能在不使用任何参数的情况下调用道具更改…但我确信如果props
更改，它也将被nextrops
（更新）调用这就是react具有此功能的原因…只需确保您传递的是正确的道具
，并注意，在回答代码中，我将一些道具名称（如
更改为
）…在表
组件中，我只使用了this.state.Tables
，并删除了val
。是的，我注意到了这一点s相应地更改并更新了我的代码。我无法理解为什么在通过schema.js中的this.state.tables提供更新的props时，在不更改props的情况下调用componentWillReceiveProps。