設置狀態不會重新呈現部件的反應，和/ ES6

我有以下組成部分：設置狀態不會重新呈現部件的反應，和/ ES6

import React from 'react'; 
import styles from './ShareModal.css'; 
import { observer } from 'mobx-react'; 

// Components 
import Modal from '../Modal/Modal'; 
import Button from '../Button/Button'; 
import Input from '../Input/Input'; 

// Stores 
import UiStore from '../../stores/UiStore'; 

@observer 
class ShareModal extends React.Component { 

    constructor() { 

     super(); 
     this.state = { 
      inputs : [ 
       { type: 'email', placeholder: 'Email Address' } 
      ] 
     }; 

    } 

    addInput() { 

     // DEBUG 
     console.log('Adding an input...'); 

     // this.state.inputs = this.state.inputs.concat([ 
     //  { type: 'email', placeholder: 'Email Address' } 
     // ]); 

     this.setState(this.state.inputs.concat([ 
      { type: 'email', placeholder: 'Email Address' } 
     ])); 

    } 

    render() { 

     return (
      <div className={ UiStore.state.shareVisible ? styles.visible : styles.hidden }> 

       <Modal id={'share'}> 

        <div className={styles.content}> 

         <h1 className={styles.title}>Share</h1> 

         <p className={styles.description}>Share with as many friends as you want. Add their email addressess below</p> 

         { 
          // Itterates over all inputs in the current state 
          this.state.inputs.map((item, i) => (
           <Input key={i} type={item.type} placeholder={item.placeholder} /> 
          )) 
         } 

         <Button 
          icon = {'add'} 
          color = {'#FC3839'} 
          type = {'outline'} 
          text = {'Add Another Email Address'} 
          width = {'full'} 
          rounded = {false} 
          action = {this.addInput.bind(this)} 
         /> 

         <Button 
          color = {'#FC3839'} 
          type = {'full'} 
          text = {'Share'} 
          width = {'full'} 
          rounded = {true} 
         /> 

        </div> 

       </Modal> 

      </div> 
     ); 
    } 

} 

export default ShareModal;

我卡上的addInput功能。你可以收集當該函數運行時應該發生的事情...所以在按鈕上單擊它會運行（它會這樣做），然後應該在this.state.inputs中添加另一個輸入，但它似乎不工作。也沒有錯誤顯示。

來源

2016-12-09 Tiwaz89

我不知道mobx，但它不應該是：

this.setState({ 
     inputs: this.state.inputs.concat([ 
      { type: 'email', placeholder: 'Email Address' } 
     ]) 
    });

來源

2016-12-09 07:46:19 Chris

耶的狀態應該是一個對象，OP的代碼試圖將其設置爲一個數組 – Jayce444

小的變化，它會工作。你需要用一個對象來設置狀態。 Array.concat返回一個數組。

this.setState({inputs: this.state.inputs.concat([ 
    { type: 'email', placeholder: 'Email Address' } 
])});

來源

2016-12-09 07:47:41

非常感謝！ – Tiwaz89

從here報價：

陣營5批多setState()調用成性能更新一次。

由於this.props和this.state可能會異步更新，因此您的不應依賴它們的值來計算下一個狀態。

我喜歡做這種方式：

this.setState((prevState) => ({ 
    inputs: prevState.concat([ 
    { type: 'email', placeholder: 'Email Address' } 
    ]) 
}));

來源

2016-12-09 07:54:06

this.setState接受一個對象..try傳遞對象

來源

2016-12-09 09:08:31 amritdevilo

設置狀態不會重新呈現部件的反應，和/ ES6

回答

相關問題