reactjs setState不改变状态答案

【问题标题】：reactjs setState not changing statereactjs setState不改变状态
【发布时间】：2017-05-12 15:47:49
【问题描述】：

我有一个函数（onClickAddSection），当它被调用时，它应该将状态设置为空字符串，但它根本不这样做。请看一下代码并告诉我我做错了什么谢谢。

class AddNewSectionForm extends Component {
constructor(props) {
    super(props);
    this.state = {
        sectionName: '',
        validation:false
    };
    this.onSectionNameChange = this.onSectionNameChange.bind(this);
    this.onClickAddSection = this.onClickAddSection.bind(this);

}

onSectionNameChange(event) {
    if(this.state.validation==false){
        this.setState({validation:true});
    }
    this.setState({sectionName: event.target.value});
}

onClickAddSection(event) {
    event.preventDefault();
    this.props.saveSection(this.state.sectionName);
    this.setState({sectionName:'',validation:false});
}

render() {
    return (
            <div>
                <TextInput name="newSection" label="Section Name :"
                           onChange={this.onSectionNameChange}
                           value={this.state.sectionName}
                           error = {this.state.validation==true&& this.state.sectionName.length==0?'Enter Section Name':''}/>
                <AddCloseButtons add = {this.onClickAddSection}
                                 close = {this.props.closeCharm}
                                 />
            </div>
    );
}

}

onClickAddSection 函数不会将 sectionName 设置回 ''。

添加关闭按钮：

const AddCloseButtons = ({add,close}) => {
return (
    <div className="form-group">
        <button className="btn btn-primary" style={{width: '40%', border:'solid black 1px'}} onClick={add}>Add</button>
        <button className="btn btn-secondary" style={{width: '40%', float: 'right',border:'solid black 1px'}} onClick={close}>Close</button>
    </div>);

};

【问题讨论】：

您能否更具体地说明您的意思是没有改变？您是否从 console.log 中知道，或者您正在寻找的其他特定结果没有发生？
这里组件的重点是添加一个带名称的部分。这里我有 TextInput 组件，该组件上的 onChange 方法使用函数“onSectionNameChange”更改当前组件的状态。这很好用。但是在我添加了用户键入的名称的部分后，我将状态中的 sectionName 设置为 onClickAddSection 函数内的空字符串。这不起作用
在我添加部分后，它没有将状态设置回空字符串。
它会进入函数内部吗？ AddCloseButtons 长什么样子？
我将组件添加到主要问题中。请看一下

标签： javascript reactjs setstate

【解决方案1】：

你在使用 Redux 吗？如果是这样，this.props.saveSection 会进行任何 Ajax 调用？如果是这样，您是否可以使用 setState 更新本地状态，然后您的 Ajax 响应将其重新更新为接收到的值？

【讨论】：

我从 redux 中分离了这个组件，并且 setState 工作正常。我不明白我做错了什么。我必须指出，我也遇到了状态突变错误。这是因为我有一个对象，其中嵌套了一堆数组。然后我只将 Object.assign({},survey) 用于最顶部的对象，并将所有其他数组推入新的调查。这会是一个原因吗？
我建议你试试这个：storedState = this.state.sectionName; this.setState({sectionName:'',validation:false},()=>{this.props.saveSection(storedState);});
当我只更新顶级组件而不更新 redux 存储时，它工作正常。但如果我更新它，它会抛出一些奇怪的错误。这可能是因为我改变了状态。我解决了这个问题，然后试试看它是否有效

【解决方案2】：

试试看setState的功能版。

this.setState(function (state, props) {
 return {
  sectionName:'',
  validation:false
 }
});

【讨论】：

我试过了，没用。可能是因为 redux

【解决方案3】：

好像点击按钮的时候onSectionNameChange和onClickAddSection是同时发生的，会发生冲突（因为名称设置为空白，表示正在更改名称^^），那不在onSectionNameChange 中设置sectionName 的状态：

onSectionNameChange(event) {
    if(this.state.validation==false){
        this.setState({validation:true});
    }
    //this.setState({sectionName: event.target.value});
}

我想是的，如果有错误，请在这里发布，谢谢

【讨论】：

onSectionNameChange 发生在用户在输入字段中输入内容时，而 onClickAddSection 发生在用户单击添加按钮时，我可能错了，但您认为它们同时发生吗？
是的，我想是的，在某些时候，当值设置为 BLANK '' 时，可能会发生这种情况 ^^ 因为 javascript 的性质是异步的（即使 setState 也不会立即生效) 此外，在 React 页面上，许多动作可能同时发生，即使对于 1 个相同元素的动作也是如此。如果您认为这是合乎逻辑的，请考虑给我一个赞成票，尽管它不被接受，谢谢