Question

我有一个应用程序，当用户单击按钮时，它会加载数据集。单击另一个按钮时，将加载另一个数据集。我试图每次单击按钮时清除数据集。因此，如果我单击按钮2，则按钮1的状态将重置为[]（数据是数组）

这是我的代码：

class Home extends React.Component {
  handleCopyTrack = (event) => {
    event.preventDefault();

    this.setState({ courthouse: [] });

    let args = {
      selected_site_id: this.props.authenticate.selected_site_id,
      site_name: this.props.authenticate.site_name,
      sec_organization_id: this.props.authenticate.selected_sec_organization_id,
      sec_user_name: this.props.authenticate.sec_user_name,
    };
    this.props.loadCopyTrackInfo(args);
  };

  handleCourtHouse = (event) => {
    event.preventDefault();

    this.setState({ copytrack: [] });

    let args = {
      selected_site_id: this.props.authenticate.selected_site_id,
      site_name: this.props.authenticate.site_name,
      sec_organization_id: this.props.authenticate.selected_sec_organization_id,
      sec_user_name: this.props.authenticate.sec_user_name,
    };
    this.props.loadCourtHouseInfo(args);
  };

这部分无效：this.setState({ courthouse: [] });

我想念什么？

Answer 1

我没有看到您所在州的初始化状态。你有构造函数吗？

setState也是一个异步函数。如果要更改状态，然后将该状态与更改后的值一起使用，则必须在setState的回调中调用另一个函数。

const handleClick = this.setState({ courthouse: [] }, this.handleClickButtonOperations());

Answer 2

这是我解决的方法：

我设置了本地状态：

class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
  showCopytrack: false,
  showCourtHouse: false,
};

}

然后，在调用事件时，我会更新交替状态：

  handleCopyTrack = (event) => {
  event.preventDefault();
  this.setState({ showCopytrack: true });
  this.setState({ showCourtHouse: false });

然后我根据设置为true或false的内容显示或隐藏：

{this.state.showCopytrack === true ? (

Answer 3

我建议切换到钩子：

const Home = ({authenticate, loadCopyTrackInfo, loadCourtHouseInfo}) => {
  const [courtHouse, setCourtHouse] = useState([]);
  const [copyTrack, setCopyTrack] = useState([]);

  function handleCopyTrack(event) {
    event.preventDefault();

    //Why you even need to clear this array here? Initial state will be empty array so after click new data will be added so no need to clearing
    //setCourtHouse([]);

    //you can pass here authenticate object
    return loadCopyTrackInfo(authenticate);
  };

  function handleCourtHouse(event) {
    event.preventDefault();
    //setCopyTrack([]);

    return loadCourtHouseInfo(authenticate);
  };

如何在React中使用onClick重置状态的特定部分

3 个答案: