React：this.setState没有重置状态

Question

我有一些数据我正在提炼渲染，实际上我希望有一个复选框来重置状态和DOM，就像页面加载时一样。

最初我在州上有一个选定的属性，并且有条件确保它正常工作。那很有效。但我无法让它发挥作用，我缺少什么？

2018年5月9日更新

正如Jay在下面提到的那样，我将把整个模块放在一个片段中，并专注于问题/问题的关键部分，

整个模块位于以下片段中......

我有一个显示对象数组的组件，每个对象都被提取到自己的卡中。为清晰起见，下面是截图。

以下是我的组件中的方法：

handleReset() {
    this.setState({
      data: this.props.data,
    });
  }

这是正在呈现的JSX。

<label>
  <input type="checkbox" onChange={this.handleReset} />
  <b>reset</b>
</label>

有一些时间考虑这个，我意识到我的handeReset没有做任何事情可能是因为它只是渲染状态，就像现在一样。那么我的问题是你如何回到UI最初看起来的样子？预先排序？

import React, {
  Component
} from 'react';
import {
  Card,
  Select,
  Segment,
  Container,
  Divider,
  Grid,
  Header,
  Image
} from 'semantic-ui-react';
import '../css/app.css';

class FilterOptions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      priority: '',
      category: '',
      selected: false,
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  handleReset() {
    this.setState({
      data: this.state.data,
    });
  }

  handleChange(e) {
    var val = e.target.value;
    if (!isNaN(val)) {
      this.setState({
        priority: val
      });
    } else if (isNaN(val)) {
      this.setState({
        category: val
      });
    }
    this.props.changeOption(val);
  }

  render() {
    var reset;
    if (!this.state.data) {
      reset = 'reset';
    } else {
      reset = 'not reset';
    }
    return ( <
      div >
      <
      h5 > By category < /h5> <
      label >
      <
      input type = "checkbox"
      onChange = {
        this.handleReset
      }
      />
      reset {
        reset
      } <
      /label> <
      h5 > By category < /h5> <
      ul >
      <
      li >
      <
      label >
      <
      input type = "radio"
      value = "cat1"
      checked = {
        this.state.category === 'cat1'
      }
      onChange = {
        this.handleChange
      }
      />
      cat1 <
      /label> <
      /li> <
      li >
      <
      label >
      <
      input type = "radio"
      value = "cat2"
      checked = {
        this.state.category === 'cat2'
      }
      onChange = {
        this.handleChange
      }
      />
      cat2 <
      /label> <
      /li> <
      li >
      <
      label >
      <
      input type = "radio"
      value = "cat3"
      checked = {
        this.state.category === 'cat3'
      }
      onChange = {
        this.handleChange
      }
      />
      cat3 <
      /label> <
      /li> <
      /ul> <
      h5 > By priority < /h5> <
      ul >
      <
      li >
      <
      label >
      <
      input type = "radio"
      value = "1"
      checked = {
        this.state.priority === '1'
      }
      onChange = {
        this.handleChange
      }
      />
      1 <
      /label> <
      /li> <
      li >
      <
      label >
      <
      input type = "radio"
      value = "2"
      checked = {
        this.state.priority === '2'
      }
      onChange = {
        this.handleChange
      }
      />
      2 <
      /label> <
      /li> <
      li >
      <
      label >
      <
      input type = "radio"
      value = "3"
      checked = {
        this.state.priority === '3'
      }
      onChange = {
        this.handleChange
      }
      />
      3 <
      /label> <
      /li> <
      li >
      <
      label >
      <
      input type = "radio"
      value = "4"
      checked = {
        this.state.priority === '4'
      }
      onChange = {
        this.handleChange
      }
      />
      4 <
      /label> <
      /li> <
      /ul> {
        /*<h5>By Color</h5>
                    <ul>
                      <li>
                        <label>
                          <input type="radio" value="Orange" checked={this.state.color === 'Orange'} onChange={this.handleChange} />
                          <div className="circle orange-filter-bg" />
                        </label>
                      </li>
                      <li>
                        <label>
                          <input type="radio" value="Green" checked={this.state.color === 'Green'} onChange={this.handleChange} />
                          <div className="circle green-filter-bg" />
                        </label>
                      </li>
                      <li>
                        <label>
                          <input type="radio" value="Blue" checked={this.state.color === 'Blue'} onChange={this.handleChange} />
                          <div className="circle blue-filter-bg" />
                        </label>
                      </li>
                      <li>
                        <label>
                          <input type="radio" value="Purple" checked={this.state.color === 'Purple'} onChange={this.handleChange} />
                          <div className="circle purple-filter-bg" />
                        </label>
                      </li>
                    </ul>*/
      } <
      /div>
    );
  }
}

function FilterUsers(props) {
  return ( <
    Container >
    <
    br / >
    <
    br / >
    <
    Grid columns = {
      3
    }
    doubling stackable > {
      props.data.map((user /* leveraging arrow functions implicit return */ ) => ( <
        Grid.Column key = {
          user.name
        } >
        <
        Segment className = {
          `priority${user.priority}`
        } >
        <
        Card >
        <
        Card.Content >
        <
        Card.Header >
        <
        h2 > name: {
          user.name
        } < /h2> <
        /Card.Header> <
        Card.Meta >
        <
        span className = "card__age" > age: {
          user.age
        } < /span> <
        /Card.Meta> <
        Card.Description > priority: {
          user.priority
        } < /Card.Description> <
        Card.Description className = "card__catergory" > category: {
          user.category
        } < /Card.Description> <
        /Card.Content> <
        /Card> <
        /Segment> <
        /Grid.Column>
      ))
    } <
    /Grid> <
    /Container>
  );
}

export default class SortAndFilterForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      priority: '',
      category: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(val) {
    if (!isNaN(val)) {
      this.setState({
        priority: val
      });
      var filteredByPriority = this.props.data.filter(function(item) {
        return parseInt(item.priority) === parseInt(val);
      });
    } else {
      this.setState({
        category: val
      });
      var filteredByPriority = this.props.data.filter(function(item) {
        return item.category === val;
      });
      this.setState({
        category: val
      });
    }

    console.log('filteredByPriority', filteredByPriority);
    this.setState({
      data: filteredByPriority
    });
  }
  render() {
    return ( <
      Container >
      <
      h1 > Sorts < /h1> <
      FilterOptions data = {
        this.state.data
      }
      changeOption = {
        this.handleChange
      }
      /> <
      FilterUsers data = {
        this.state.data
      }
      /> <
      /Container>
    );
  }
}

Answer 1

我猜这个问题在这里：

handleReset() {
  this.setState({
    data: this.state.data,
  });
}

您将state.data设置为state.data，毫不奇怪，这不会改变任何内容。我想你想做的事：

handleReset() {
  this.setState({
    data: this.props.data,
  });
}

Answer 2

你的HandleReset（）方法应该将所有状态设置为开头时的状态：

this.state = {
      data: this.props.data,
      priority: '',
      category: '',
    };

您的卡片使用props.data.map进行渲染，这意味着它们不会受到状态变化的影响。您应该使用来自州的数据来渲染它们。

Answer 3

如果我是你，我会将FilterOptions变成纯粹的功能组件（例如只接受props，没有constructor，没有state，移动{{1 }和handleReset向上到handleChange并通过道具将它们传回来。）

在SortAndFilterForm的{​​{1}}中，我会存储其初始状态SortAndFilterForm元素的副本（已将其作为{{1}传递给它来自其他东西）作为一个状态变量（nb constructor()创建一个浅浅的副本，看起来它应该在这里工作，但它取决于内容以及你如何在其他地方改变它们）：

data

props.data中的Object.assign方法如下所示：

this.state = {
  data: props.data,
  initData: Object.assign({}, props.data),
  priority: '',
  category: ''
}

您当然需要在handleReset的{​​{1}}：

中绑定它

SortAndFilterForm

...并将其传递给handleReset() { this.setState({ data: Object.assign({}, this.state.initData) }) } ：

SortAndFilterForm

我相信以上所有都应该照顾好你的问题。