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;

从“React”导入React；
从“./ShareModal.css”导入样式；
从'mobx react'导入{observer}；
//组成部分
从“../Modal/Modal”导入模态；
从“../Button/Button”导入按钮；
从“../Input/Input”导入输入；
//商店
从“../../stores/UiStore”导入UiStore；
@观察者
类ShareModal扩展了React.Component{
构造函数（）{
超级（）；
此.state={
投入：[
{键入：“电子邮件”，占位符：“电子邮件地址”}
]
};
}
附加输入（）{
//调试
log（'添加输入…'）；
//this.state.inputs=this.state.inputs.concat([
//{键入：“电子邮件”，占位符：“电子邮件地址”}
// ]);
this.setState（this.state.inputs.concat([
{键入：“电子邮件”，占位符：“电子邮件地址”}
]));
}
渲染（）{
返回(
共有
与任意多的朋友共享。在下面添加他们的电子邮件地址
{
//在当前状态下对所有输入执行速率
this.state.inputs.map（（项，i）=>(
))
}
);
}
}
导出默认共享模式；

---

我被

addInput

函数卡住了。您可能可以收集该函数运行时应该发生的情况。。。因此，在按钮上单击它运行（确实如此），然后应该在

this.state.inputs

中添加另一个输入，但它似乎不起作用。也没有显示错误。

我不知道mobx，但它不应该是：

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

---

我不知道mobx，但它不应该是：

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

---

零钱少了就行了。您需要设置对象的状态<代码>数组。concat返回一个数组

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

---

零钱少了就行了。您需要设置对象的状态<代码>数组。concat返回一个数组

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

引述自：

React可以将多个

setState（）

调用批处理到一个更新中，用于 表演

因为

this.props

和

this.state

可能会异步更新，所以 不应依赖其值来计算下一个状态

我更喜欢这样做：

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

引述自：

React可以将多个

setState（）

调用批处理到一个更新中，用于 表演

因为

this.props

和

this.state

可能会异步更新，所以 不应依赖其值来计算下一个状态

我更喜欢这样做：

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

---

this.setState接受对象..尝试传递对象

this.setState接受对象..尝试传递对象

是的，状态应该是对象，OP的代码尝试将其设置为数组。如果状态应该是对象，OP的代码尝试将其设置为数组