设置状态未在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' }
        ])
    });

Answer 2

小小的改变，它将起作用。 您需要使用对象设置状态。 Array.concat返回一个数组。

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

Answer 3

从这里报价：

React可以将多个setState()调用批处理到单个更新中以提高性能。

由于this.props和this.state可以异步更新，因此您不应依赖于它们的值来计算下一个状态。

我更喜欢这样：

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

Answer 4

this.setState接受一个对象。尝试传递一个对象