javascript - 设置状态不是在 React/ES6 中重新渲染组件

Question

我有以下组件:

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 中添加另一个输入但它没有似乎没有用。也没有错误显示。

Answer 1

我不知道 mobx，但不应该是:

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