反應。組件未在狀態改變

-3

在反應的次序呈現的，假設我有丙名稱輸入分量= A，B，C. 它們在順序呈現反應。組件未在狀態改變

render() { 
    return(
     <Input name="A" /> 
     <Input name="B" /> 
     <Input name="C" /> 
    ); 
}

然後我的狀態改變ç和甲的順序第一ç然後A. 組分甲和Ç重新呈現的順序第一甲然後Ç。它們沒有在狀態變化的順序呈現（ç然後甲）

參見下面給出的代碼段。我發現了把其形式爲C

設定狀態 B的

設定狀態

的

設定狀態渲染的

渲染B的

C的渲染

class Input extends React.Component { 
 
    
 
    
 
\t componentWillMount() { 
 
\t \t \t this.props.addInput(this); 
 
\t } 
 
    
 
    state = { 
 
    \t error: false 
 
    } 
 
    
 
    check() { 
 
    console.log("set state of", this.props.name) 
 
    this.setState({ 
 
     error: true 
 
    }) 
 
    } 
 

 
    render() { 
 
    \t console.log("Render of", this.props.name) 
 
    return (
 
     <input /> 
 
    ); 
 
    } 
 
} 
 
class Hello extends React.Component { 
 
    
 
    constructor(props) { 
 
    super(props); 
 
    this.inputs = {}; 
 
} 
 

 
    addInput(component) { 
 
     this.inputs[component.props.name] = component; 
 
     console.log(this.inputs); 
 
    } 
 
    
 
    checkAll() { 
 
    const inputs = this.inputs; 
 
    Object.keys(inputs).reverse().forEach(name => { 
 
    inputs[name].check() 
 
    }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
    \t <div> 
 
     <Input addInput={(c) => this.addInput(c)} name="A"/> 
 
     <Input addInput={(c) => this.addInput(c)} name="B"/> 
 
     <Input addInput={(c) => this.addInput(c)} name="C"/> 
 
     <button onClick={() => this.checkAll()}>click here</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Hello initialName="World"/>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

來源

2017-08-14 PranavPinarayi

您必須包含相關的代碼部分才能重現問題。 –

嗨，我只是想知道反應組件渲染的順序。 – PranavPinarayi

@YuryTarabanko添加代碼片段請檢查 – PranavPinarayi

這是JSX應該如何默認工作。

如果你想呈現在最後狀態變化的訂單成分，你必須把所有的零件，它們放進一個數組或有一個集合的componentName: componentInstance，還具有componentName: lastUpdated集合[或數組（或數組項目形式{ componentName: string, lastUpdated: Date }），您可以在其中修改每個組件的lastUpdated值，然後按日期值對componentName: componentInstance集合或數組進行排序。

然後在JSX中只有.map。

來源

2017-08-14 06:12:53 Denialos

感謝您的回答。你能否請檢查更新的代碼。 – PranavPinarayi

反應。組件未在狀態改變

回答

相關問題