javascript - 设置状态未在React/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中添加另一个输入，但它似乎不起作用。也没有错误显示。

最佳答案

我不认识mobx，但不应该这样：

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

关于javascript - 设置状态未在React/ES6中重新渲染组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41055398/