react函数组件定义的useState数据怎么push

在React中，useState Hook返回的是一个包含当前状态和设置状态的函数的数组。由于useState返回的状态值是不可变的，因此无法使用数组的push方法来修改它。如果想要添加新的值到状态中，可以使用useState返回的设置状态的函数，并传入一个新的数组，该数组包含旧的状态值及要添加的新值。例如：

const [list, setList] = useState(['apple', 'banana']);

setList(prevList => [...prevList, 'orange']);

这里，我们使用了ES6的展开运算符来将旧的状态值展开，并添加新的值'orange'。这样就创建了一个新的数组，其中包含旧的值和新的值。然后使用设置状态的函数setList来更新状态。注意：我们在设置状态时，使用了函数的形式，而不是直接传递新的状态值。这是因为我们需要访问旧的状态值，以便添加新的值。

相关问题

react 函数组件路由配置的几种方法 及 路由传参的几种方法 和 用类组件 获取路由参数 写的详细一点 弄成 笔记的形式

React是一个非常流行的前端库，常用于开发单页应用程序（SPA）。在SPA中，路由是非常重要的，因为它允许我们在不刷新页面的情况下切换页面视图。在React中，我们可以使用React Router来实现路由功能。React Router是一个独立的库，可以与React一起使用。

在React中，我们可以使用函数组件或类组件来定义我们的路由。这里我们将讨论函数组件路由配置的几种方法以及路由传参的几种方法。然后，我们将看看如何使用类组件来获取路由参数。

## 函数组件路由配置的几种方法

### 方法1：使用React Router的`<Route>`组件

React Router提供了一个`<Route>`组件，我们可以用它来定义我们的路由。下面是一个例子：

import { BrowserRouter as Router, Route } from 'react-router-dom'

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  )
}

在上面的代码中，我们首先导入了`BrowserRouter`和`Route`组件。然后，我们在`<Router>`组件中定义了三个路由，分别是`"/"`，`"/about"`和`"/contact"`。每个路由都有一个对应的组件，当用户访问该路由时，将呈现该组件。

### 方法2：使用React Router的`<Switch>`组件

如果我们使用上面的方法定义路由，当我们访问`"/about"`时，React将同时呈现`"/"`和`"/about"`，因为它们都匹配了路径。要解决这个问题，我们可以使用`<Switch>`组件。`<Switch>`组件只会呈现第一个匹配的路由，其余的路由都将被忽略。下面是一个例子：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  )
}

在上面的代码中，我们用`<Switch>`组件替换了`<Router>`组件。现在，当我们访问`"/about"`时，只有`"/about"`路由匹配，因此只会呈现`About`组件。

### 方法3：使用React Router Hooks

React Router还提供了一些Hooks，例如`useHistory`，`useLocation`和`useParams`。这些Hooks允许我们在函数组件中访问路由信息。下面是一个例子：

import { BrowserRouter as Router, Switch, Route, Link, useHistory, useLocation, useParams } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

function About() {
  const history = useHistory();
  const location = useLocation();
  const params = useParams();

  return (
    <div>
      <h2>About</h2>
      <p>当前路径：{location.pathname}</p>
      <p>查询参数：{JSON.stringify(location.search)}</p>
      <p>路由参数：{JSON.stringify(params)}</p>
      <button onClick={() => history.goBack()}>返回</button>
    </div>
  );
}

在上面的代码中，我们定义了一个`About`组件，并使用`useHistory`，`useLocation`和`useParams` Hooks来访问路由信息。`useHistory` Hook允许我们访问`history`对象，它包含有关浏览器历史记录的信息，例如前进，后退和推送新条目。`useLocation` Hook允许我们访问`location`对象，它包含有关当前URL的信息，例如路径和查询参数。`useParams` Hook允许我们访问路由参数。

## 路由传参的几种方法

### 方法1：使用URL参数

使用URL参数是一种常见的路由传参方法。我们可以在URL中包含参数，然后在组件中使用路由参数来访问它们。下面是一个例子：

import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about/:name" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

function About() {
  const { name } = useParams();

  return (
    <div>
      <h2>About {name}</h2>
    </div>
  );
}

在上面的代码中，我们在路由路径中包含了一个参数`:name`。当用户访问`/about/john`时，我们可以使用`useParams` Hook来访问`name`参数。

### 方法2：使用查询参数

使用查询参数是另一种常见的路由传参方法。我们可以在URL中包含查询参数，然后在组件中使用`useLocation` Hook来访问它们。下面是一个例子：

import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to={{ pathname: '/about', search: '?name=john' }}>About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

function About() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const name = params.get('name');

  return (
    <div>
      <h2>About {name}</h2>
    </div>
  );
}

在上面的代码中，我们在`<Link>`组件中使用了一个对象来设置查询参数。然后，在`About`组件中，我们使用`useLocation` Hook来访问`location`对象，然后使用`URLSearchParams`来解析查询参数。

### 方法3：使用状态

使用状态是一种更高级的路由传参方法。我们可以在一个组件中设置状态，然后将该状态作为参数传递给另一个组件。下面是一个例子：

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

function About(props) {
  const [name, setName] = useState('');

  return (
    <div>
      <h2>About {name}</h2>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => props.history.push(`/about/${name}`)}>提交</button>
    </div>
  );
}

在上面的代码中，我们在`About`组件中设置了一个状态`name`，并将其作为参数传递给另一个组件。然后，我们使用`useState` Hook来设置和更新该状态。当用户点击提交按钮时，我们使用`props.history.push`方法将状态传递给另一个组件。

## 用类组件获取路由参数

除了使用函数组件，我们还可以使用类组件来定义我们的路由。下面是一个例子：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <Router>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/john">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about/:name" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Router>
    );
  }
}

class About extends Component {
  render() {
    const { match } = this.props;
    const { name } = match.params;

    return (
      <div>
        <h2>About {name}</h2>
      </div>
    );
  }
}

在上面的代码中，我们使用类组件定义了我们的路由。当用户访问`/about/john`时，我们可以使用`match.params`来访问路由参数。

基于react函数组件写一个组织树，满足选择组织机构或一线员工进行回收，在某个层级下可多选，但是不可同时选择不同层级回收。如果调度层级回收，提供是否全部回收的按钮。

A：

首先，需要引入相关组件和样式：

import React, { useState } from 'react';
import { Tree, Checkbox } from 'antd';
import 'antd/dist/antd.css';

然后，定义一个组织树组件：

const OrgTree = ({ data }) => {
  const [checkedKeys, setCheckedKeys] = useState([]);

  const onCheck = (checkedKeys) => {
    setCheckedKeys(checkedKeys);
  };

  const renderCheckbox = (node) => {
    if (node.isLeaf) {
      return <Checkbox value={node.key}>{node.title}</Checkbox>;
    }
    return node.title;
  };

  return (
    <Tree
      checkable
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      switcherIcon={<DownOutlined />}
      treeData={data}
      titleRender={renderCheckbox}
    />
  );
};

其中，`data` 是组织树数据源，`checkedKeys` 是当前选中的节点的 key，`onCheck` 是选中节点时的回调函数，在回调函数中更新 `checkedKeys` 状态；`renderCheckbox` 主要是根据节点是否为叶子节点来判断该节点是否需要显示选择框。

接下来，在组织树之上定义一个回收组件：

const Recycle = ({ data }) => {
  const [levelCheckedKeys, setLevelCheckedKeys] = useState({});
  const [selectedLevel, setSelectedLevel] = useState(null);

  const onCheckLevel = (checkedKeys, { node }) => {
    setSelectedLevel(node.level);
    setLevelCheckedKeys({ ...levelCheckedKeys, [node.level]: checkedKeys });
  };

  const handleRecycle = (allSelected) => {
    console.log(`将 ${selectedLevel} ${allSelected ? '全部' : '部分'} 回收`);
  };

  const renderCheckbox = (node) => {
    if (node.isLeaf) {
      return <Checkbox value={node.key}>{node.title}</Checkbox>;
    }
    return node.title;
  };

  const levelNodes = data.reduce((acc, cur) => {
    const index = cur.title.lastIndexOf('-');
    const level = cur.title.substring(0, index);

    if (!acc[level]) {
      acc[level] = [];
    }
    acc[level].push(cur);
    return acc;
  }, {});

  const levels = Object.keys(levelNodes);

  return (
    <div>
      <OrgTree data={data} />
      <div style={{ marginTop: 16 }}>
        <div style={{ marginBottom: 8 }}>选择级别回收：</div>
        {levels.map((level) => (
          <div key={level}>
            <div style={{ marginBottom: 8 }}>{level}</div>
            <Checkbox.Group
              options={levelNodes[level]}
              value={levelCheckedKeys[level]}
              onChange={onCheckLevel}
              optionRender={renderCheckbox}
            />
          </div>
        ))}
        {selectedLevel && (
          <div style={{ marginTop: 16 }}>
            <Checkbox onChange={(e) => handleRecycle(e.target.checked)} checked={false}>
              是否全部回收 {selectedLevel}？
            </Checkbox>
            <Button type="primary" onClick={() => handleRecycle(false)} style={{ marginLeft: 16 }}>
              部分回收
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

其中，`levelCheckedKeys` 是一个对象，用于存储每个层级选择的节点的 key；`selectedLevel` 是选中层级的标识，用于判断是否显示回收操作。

`onCheckLevel` 函数与 `onCheck` 函数类似，不同的是在更新 `levelCheckedKeys` 状态之前先保存当前选中的层级标识；`handleRecycle` 函数用于执行回收操作，接收一个参数 `allSelected`，表示是否全部回收。在组件中渲染组织树和层级选择框，同时判断是否选中某个层级，若选中则显示回收操作。

最后，使用 `Recycle` 组件并传入数据源即可：

const data = [
  {
    title: '总部',
    key: '0',
    children: [
      {
        title: '人事部',
        key: '0-0',
        children: [
          { title: '李四', key: '0-0-0', isLeaf: true },
          { title: '王五', key: '0-0-1', isLeaf: true },
        ],
      },
      {
        title: '财务部',
        key: '0-1',
        children: [
          { title: '张三', key: '0-1-0', isLeaf: true },
          { title: '赵六', key: '0-1-1', isLeaf: true },
        ],
      },
    ],
  },
];

<Recycle data={data} />;

在这里，我们使用了 antd 的相关组件，包括 `Tree` 和 `Checkbox`。同时，通过 `useState` 来管理组件的状态，使用函数组件的方式编写了一个组织树，并且实现了所需的选中和回收功能。