Question

如何在React中的render和componentDidMount之间共享数据？

componentDidMount

    componentDidUpdate(prevState){
        if (prevState.lessonsLoading === false) {
            let items = this.state.items;
            let counter = 0;
            let posi = 0;
            items.forEach(item => {
                if ( t(item, `.slug`).safeObject === this.props.match.params.lesson_id ) {
                    console.log( t(item, `.slug`).safeObject );
                    posi = counter;
                }
                counter += 1;
            });
            if (posi > 0) {
                this.prev = items[posi-1];
                console.log('Prev: ',t(this.prev, `.slug`).safeObject);
            }else{
                this.prev = items[0];
                console.log('Prev: ',t(this.prev, `.slug`).safeObject);
            }
            if (posi < items.length-1) {
                this.next = items[posi+1];
                console.log('Next: ',t(this.next, `.slug`).safeObject);
            }else{
                this.next = items[items.length-1];
                console.log('Next: ',t(this.next, `.slug`).safeObject);
            }
            console.table(items);
        }
    }

渲染

    render() {
       console.log('from render', t(this.prev, `.slug`).safeObject );
       console.log('from render', t(this.next, `.slug`).safeObject );

控制台结果

渲染10197-01-definition-et-declaration中的

1
2来自render 10200-02-utilization
10198-03-enregistrement-ayant-un-champ-de-type-enregistrement
3上一个：10200-02-utilization
4下一个：10199-04-probleme-a-resoudre

为什么行1 <> 3和2 <> 4

Answer 1

通常，每次更新“状态变量”渲染时，都会重新渲染该状态所属的react组件。我通常说，随着React并行运行许多事情。在需要时使事情“顺序化”的关键是使用setState回调函数，该函数允许在setState命令执行后运行代码。看起来像：

<div class="modal animate fade" id="Searchfor" role="dialog" aria- 
    labelledby="CenterTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-sm" 
        role="document">
      <div class="modal-content">
         <div class="modal-header" style="background-color: #337AB7; 
             color:#FFF;">
            <h4 class="modal-title" id="CenterTitle"><strong>Search For: 
                </strong></h4>
            <button type="button" class="close" data-dismiss="modal" 
                 aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
         </div>

         <div class="modal-body">
            <table id="FbVendor">
               <tr>
                  <td>
                     <input id="chkFbb" type="checkbox" value="Fb 
                           Services" data-toggle="modal" data- 
                           target="#SearchFb"/><label 
                           for="chkFb">&nbspFb Services</label>
                  </td>
               <tr>
               <tr>
                  <td>
                     <input id="chkVend" type="checkbox" value="Vend" 
                           data-toggle="modal" data- 
                           target="#SearchVend"/><label 
                           for="chkVend">&nbspVend Services</label>
                  </td>
               </tr>
            </table>
         </div>

         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- 
                  dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

您还可能想阅读：https://reactjs.org/docs/state-and-lifecycle.html

如何在React中的render和componentDidUpdate之间共享数据？

为什么行1 <> 3和2 <> 4

1 个答案: