小编Ani*_*ony的帖子

我希望让我的alert()用户更加友好。在触发警报之前，我有 3 个组件可以组合在一起。

我有一个表单（下拉列表和输入），它在提交时会触发以下功能：

// src/components/input.js
<Btn onClick={() => getData(this.state.dropdown, this.state.value)}>Generate</Btn>

getData() 是以下功能，它位于单独的文件中 ../utils/debugger

// src/utils/debugger
async function getData(filter, captureName) {
  if (captureName === '') {
    alert(<Alert color='red' type='warning' message='this is an error' />);
  } else {
    axios({
      method: 'GET',
      url: `http://xxx/debugger/${filter}/${captureName}/logs`,
    })
      .then((res) => {
        if (res.data.length === 0) {
          alert(<Alert color='red' type='warning' message='this is an error' />);
        } else {
          alert(<Alert color='green' type='success' message='this is an error' />);
          console.log(res.data);
          data = res.data;
        }

        return res.data;
      }) …

我已经为此绞尽脑汁有一段时间了，任何帮助将不胜感激。

我正在将 React 与 Redux Toolkit 结合使用，尽管 Redux 按预期响应，但我仍在努力让 React 从我的 UI 中删除“todo”。在 Redux 开发者工具中，removeTodo 按预期工作，从 todos 数组状态中删除一个待办事项，但 React 不会跟随，因此我的 UI 不会随之改变。我的 addTodo 操作在 React 和 Redux 中都按预期工作。

当我单击调用removeTodo 调度的按钮时，我当前的代码出现以下错误。

TypeError: Cannot read property 'length' of undefined\nApp\nC:/Users/joeee/Documents/redux-middleware/src/app/App.js:13\n  10 | \n  11 |  return (\n  12 |    <div style={divStyles}>\n> 13 |      <TodosForm />\n     | ^  14 |      {todos.length > 0 && <TodoList />}\n  15 |    </div>\n  16 |  )\nView compiled\n\xe2\x96\xb6 19 stack frames were collapsed.\n

应该注意的是，当我的待办事项数组状态的长度 > …

我想在用户输入请求的信息后在组件之间切换。
将按此顺序向用户显示的组件：

1. {MobileNum } 输入手机号码
2. {IdNumber } 身份证号码
3. {CreatePassword } 创建密码

当所有这些步骤完成后，浏览器将切换到主页。用户必须无法在页面之间移动，直到他填写了每个组件中的每个请求。

现在我想要一种更好的路由器方式，就好像我里面有 3-4 个组件Login，并且必须在安全的乳清中，而且用户不能通过 URL 手动切换组件。

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom';
import MobileNum from './MobileNum.jsx';
import IdNumber from './IdNum.jsx';
import CreatePassword from './createPassword .jsx';

class SignUp extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Router>
          <Switch>
                //// Here needs to know how to navigate to each component …