小编Fra*_*ion的帖子

由于react-router-domuseHistory不再受支持，我正在寻找一个等效的使用history.location.pathname

我有一个用TypeScript编写的React应用程序（16.8.6），该应用程序使用React Router（5.0.1）和MobX（5.9.4）。导航正常运行并应在适当的时候加载数据，但是，当我单击浏览器的“后退”按钮时，URL会更改，但不会更新任何状态，并且页面也不会重新呈现。我已经阅读了有关此问题和withRouter修复的无数文章，我尝试了这些文章，但没有什么不同。

一个典型的用例是导航到摘要页面，选择导致加载新数据和推送新历史记录状态的各种操作，然后再返回几个步骤。大多数历史记录推送都发生在摘要组件中，该组件处理多个路由。我已经注意到，当从摘要页面返回到主页时，将按应有的方式进行重新渲染。

我的index.tsx

import { Provider } from 'mobx-react'
import * as React from 'react'
import * as ReactDOM from 'react-dom'

import App from './App'
import * as serviceWorker from './serviceWorker'
import * as Utils from './utils/Utils'

const rootStore = Utils.createStores()

ReactDOM.render(
    <Provider {...rootStore }>
        <App />
    </Provider>,
    document.getElementById('root') as HTMLElement
)

serviceWorker.unregister()

我的app.tsx

import * as React from 'react'
import { inject, observer } from 'mobx-react'
import { Route, Router, Switch } from 'react-router'

import Home from './pages/Home/Home' …

我有以下对象：

{
    array: [1]
}

以及以下代码：

myArray: Yup.array().of(
    Yup.object().shape({
        name: Yup.string().max(255).required().label('Name')
    })
)

现在我检查名称是必需的，我需要检查是否myArray必须length === 1返回错误。

我正在尝试实现 React char 但出现此错误，我搜索并遵循缩减但找不到解决方案。

import React from 'react';
import { Bar } from 'react-chartjs-2';


const BarChart = () => {

  return (
      <div>
        <Bar data={{
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, …

我正在尝试使用 Reactjs 中的材料来实现一棵树。但是，根据我的设计，折叠和展开的按钮应该在右侧。

另外，在添加这样的图标时出现错误TreeItem：

<TreeItem nodeId="1" label="RSMSSB" icon={FolderIcon}>

全码：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TreeItem from "@material-ui/lab/TreeItem";
import FolderIcon from '@material-ui/icons/Folder';
const useStyles = makeStyles({
  root: {
    height: 216,
    flexGrow: 1,
    maxWidth: 400
  }
});

export default function ControlledTreeView() {
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState([]);

  const handleChange = (event, nodes) => {
    setExpanded(nodes);
  };

  return ( …

问题：当数据包含可变数量的日期时，如何将 x 轴“重新格式化”为升序日期？

我有一些数据包含与之关联的可变数量的“日期”。例如，第一行包含：

{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 }

而第二行包含：

{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 }

代码框：https : //codesandbox.io/s/dreamy-almeida-x7rnd?fontsize=14&hidenavigation=1&theme=dark

数据在 x 轴上“不均匀”，因此看起来很奇怪。我意识到如果我要输入“虚拟日期”和数据，那么我可以指定 x 轴成为我想要的格式，问题是虚拟日期 + 数据，因为这样它就不能准确地模拟我的数据库，所以我想避免这样的事情。

到目前为止我所做的是查看文档，我尝试将type: "time"格式添加到xscale，但出现错误

v.getTime() 不是函数。

如何更改日期字段的消息文本：

\n

date 必须是一个date类型，但最终的值是：Invalid Date

\n

现在架构看起来像这样：

let scheema= yup.object().shape({\n        date: yup.date()\n          .min(MIN_DATE, `\xd0\x94\xd0\xb0\xd1\x82\xd0\xb0 \xd0\xbd\xd0\xb5 \xd0\xbc\xd0\xbe\xd0\xb6\xd0\xb5\xd1\x82 \xd0\xb1\xd1\x8b\xd1\x82\xd1\x8c \xd1\x80\xd0\xb0\xd0\xbd\xd1\x8c\xd1\x88\xd0\xb5 ${MIN_DATE?.toLocaleDateString('ru')}`)\n          .max(MAX_DATE, `\xd0\x94\xd0\xb0\xd1\x82\xd0\xb0 \xd0\xbd\xd0\xb5 \xd0\xbc\xd0\xbe\xd0\xb6\xd0\xb5\xd1\x82 \xd0\xb1\xd1\x8b\xd1\x82\xd1\x8c \xd0\xbf\xd0\xbe\xd0\xb7\xd0\xb6\xd0\xb5 ${MAX_DATE?.toLocaleDateString('ru')}`)\n          .required('\xd0\x9e\xd0\xb1\xd1\x8f\xd0\xb7\xd0\xb0\xd1\x82\xd0\xb5\xd0\xbb\xd1\x8c\xd0\xbd\xd0\xbe\xd0\xb5 \xd0\xbf\xd0\xbe\xd0\xbb\xd0\xb5'),\n        reason: yup.string().required('\xd0\x9e\xd0\xb1\xd1\x8f\xd0\xb7\xd0\xb0\xd1\x82\xd0\xb5\xd0\xbb\xd1\x8c\xd0\xbd\xd0\xbe\xd0\xb5 \xd0\xbf\xd0\xbe\xd0\xbb\xd0\xb5'),\n        comment: yup.string().max(4000, '\xd0\x9f\xd1\x80\xd0\xb5\xd0\xb2\xd1\x8b\xd1\x88\xd0\xb5\xd0\xbd\xd0\xbe \xd0\xba\xd0\xbe\xd0\xbb\xd0\xb8\xd1\x87\xd0\xb5\xd1\x81\xd1\x82\xd0\xb2\xd0\xbe \xd1\x81\xd0\xb8\xd0\xbc\xd0\xb2\xd0\xbe\xd0\xbb\xd0\xbe\xd0\xb2'),\n    });\n

错误是：

{\n    "date": "date must be a `date` type, but the final value was: `Invalid Date`."\n}\n

我需要更改此文本

我有一个字符串 "Fred/Jim/Rob/" 我需要的是我需要将字符串分割成最后一个，同时还要避免最后一个/。

我尝试过：

for (var i = 0; i < input.length; i++) {
var input = ["Fred/Jim/Rob/"] 
var X = input.split("/",);

----some other code---
}

在那种情况下，我的循环一直运行到最后/，所以我只想避免使用last /。

我无法使用 Material-UI 的 Popover 组件获得这种行为。

我这里有这个代码示例：https : //codesandbox.io/s/88z3nq96jl 查看问题的步骤：

1. 当我单击 Filter1 按钮时，弹出窗口出现。
2. 然后，当我单击 Filter2 按钮时，Filter1 的弹出窗口关闭。
3. 然后，我需要再次单击以显示 Filter2 的弹出窗口。

但是我不想在其中一个弹出窗口打开时单击两次，我需要它关闭前一个并同时打开正确的一个。

我认为背景会阻止点击事件的传播，所以它背后的过滤器永远不会被点击。有什么办法可以避免这种情况吗？

在这种情况下，我只需要获取对象数组中的键。对象结构如下所示。我也尝试了一种方法，但是它似乎不起作用。有人可以帮我这个忙。

var arr = [
        { firstName: "aaaaa", status: 0, visits: 155 },
        { firstName: "aabFaa", status: 0, visits: 155 },
        { firstName: "adaAAaaa", status: 10, visits: 1785 },
        { firstName: "aAaaaa", status: 50, visits: 175 },
        { firstName: "aaaaa", status: 670, visits: 155 },
      ]

console.log([...new Set(arr.map(item => Object.keys(item)))]); //  This does not work

我希望输出只是 ['firstName','status','visits']

我正在研究一个函数，它接受 2 个整数并返回它们之间（包括）每个数字的总和。

我也希望它在第一个整数x大于第二个时工作y，为此我写了这个：

if (x > y) {
  let temp = x;
  x = y;
  y = x;
}

但是，我在 Visual Studio Code 上收到此消息：

'temp' 被声明，但它的值永远不会被读取。

问题是什么？

此外，这是完整的脚本：

const sumAll = function( x , y ) {

    if (x !== Math.abs(x) || y !== Math.abs(y)) return ("ERROR");
    if (typeof x !== "number" || typeof y !== "number") return ("ERROR");
    if (x > y) {
        let temp = x;
        x = y;
        y = x;
    } …