小编İlk*_*ker的帖子

React npm start 不起作用:“没有可用的 chokidar 版本”

我从 Github 克隆了我已经在 Github Pages 上运行的 React-Typescript 应用程序,并希望进行一些更改。我运行 npm install 并安装了所有依赖项,但是当我运行 npm start 时,出现此错误;

在此处输入图片说明

我不知道 chokidar 是什么,我看了一点,我认为它与我的项目无关。我仍然尝试 npm install chokidar 并且我遇到了另一个这样的错误;

在此处输入图片说明

也试过npm audit fix了。修复了一些东西,但没有任何改变。

所以我无法打开开发服务器。此外,这是 package.json 文件;

// package.json
{
  "name": "panflix",
  "homepage": "https://absolutezero13.github.io/meerkast/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/enzyme": "^3.10.8",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/redux-devtools": "^3.0.47",
    "axios": "^0.21.1",
    "enzyme": "^3.11.0",
    "firebase": "^8.2.7",
    "gh-pages": "^3.1.0",
    "history": "^4.10.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0", …
Run Code Online (Sandbox Code Playgroud)

npm typescript reactjs chokidar

16
推荐指数
4
解决办法
2万
查看次数

有什么方法可以让双击事件在使用普通 JavaScript 的手机中工作吗?

我意识到当我切换设备工具栏时我的双击事件不起作用。我用谷歌搜索,但我只看到了 jQuery 的东西,而且我对 jQuery 一无所知。我该如何进行这项工作?

stuff.addEventListener('dblclick', openOtherStuff)
Run Code Online (Sandbox Code Playgroud)

我正在尝试通过此事件打开一个模式。它在电脑上完美运行,在移动设备上不起作用。

javascript events

4
推荐指数
1
解决办法
2746
查看次数

更改 Material UI 的 DatePicker 的边框颜色

在此输入图像描述

这是我的 Material UI 中的 DatePicker,我唯一想要的就是更改 borderColor。我尝试过类、更改主题的主要颜色、使用 WithStyles.. 似乎没有任何效果。

javascript reactjs material-ui

4
推荐指数
1
解决办法
7480
查看次数

如何防止 React 重新渲染来自 url 的图像?

这就是我的应用程序现在的样子:

在此输入图像描述

搜索和排序功能是动态工作的,只要我输入一个字母,它就会找到匹配项,但会重新呈现所有匹配项。

如果我输入“饥饿”,它会找到饥饿游戏电影,但它会在已有图像时获取图像并进行渲染。有没有办法让这个过程只进行一次,这样我就不用等待每次搜索、每次排序?我使用 Redux,因此数据来自商店,商店从本地 json 文件获取数据。

我考虑过存储在本地存储上,但我无法弄清楚。如您所见,没有 ComponentDidMount 或 Hooks。

这是该页面的代码:

import React from "react";
import "./MoviesAndSeries.css";
import ListShowItem from "./ListShowItem";
import { getVisibleShows } from "../Redux/Selector";
import { connect } from "react-redux";
import FilterShowItems from "./FilterShowItems";
const Movies: React.FC = (props: any) => {
  return (
    <div className="movies">
      <FilterShowItems />
      {props.movies.map((movie: any) => {
        return <ListShowItem key={Math.random()} {...movie} />;
      })}
    </div>
  );
};

const mapStateToProps = (state: any) => {
  return {
    movies: getVisibleShows(state.movies, state.filters),
    filters: state.filters,
  };
}; …
Run Code Online (Sandbox Code Playgroud)

javascript json reactjs redux

3
推荐指数
1
解决办法
2647
查看次数

如何在使用 React Navigation 时清理 React Native 中的 useEffect?

我正在使用随机用户 api 通过 setInterval 函数获取用户信息,我的 useEffect 如下所示;

// Users.js

useEffect(() => {
    const getUser = () => {
      fetch("https://randomuser.me/api")
        .then((res) => res.json())
        .then((data) =>
          setUsers((prevUsers) => {
            return setUsers([
              ...prevUsers,
              { key: data.results[0].login.uuid, value: data.results[0] },
            ]);
          })
        );

      console.log("cleanup?");
    };
    getUser();
    // const userInterval = setInterval(getUser, 5000);
    // return () => clearInterval(userInterval);
  }, []);

Run Code Online (Sandbox Code Playgroud)

我使用反应导航在另一个页面中显示每个用户的详细信息并像这样导航;

 <TouchableOpacity
 onPress={() => navigation.navigate("userDetails", item.value)}>

Run Code Online (Sandbox Code Playgroud)

因此,当我导航到详细信息页面时,useEffect 不会返回,这意味着组件不会卸载。实际上,由于堆栈导航,页面基本上位于每个页面之上并且仍在运行。那么在这种情况下我怎样才能停止我的间隔功能呢?

reactjs react-native react-hooks

3
推荐指数
1
解决办法
2712
查看次数

使用路由器包装组件时 React-Router + Typescript 错误“没有重载匹配此调用”

在我进行快照测试之前,我有一个运行良好的组件。它说“您不应该在路由器之外使用 Link”。然后我用路由器包装了组件,但它不起作用。这是组件:

import React from "react";
import "./Body.css";
import { Link, Router } from "react-router-dom";
const Body: React.FC = () => {
  return (
    <div className="body">
      <Router>
        <Link to="/movies">
          <div className=" body__item">
            <p>MOVIES</p>
          </div>
        </Link>
        <Link to="/series">
          <div className=" body__item">
            <p>SERIES </p>
            <img src="../../../images/placeholder.png" alt="" />
          </div>
        </Link>
      </Router>
    </div>
  );
};

export default Body;
Run Code Online (Sandbox Code Playgroud)

I have @types for react-router-dom so it's not the problem. I also tried wrapping around the component.

Also the full error is:

No overload matches …

javascript typescript reactjs react-router

1
推荐指数
1
解决办法
1118
查看次数

如何为 React Native 元素添加平滑过渡

我知道 React Native 有 Animated API,但据我所知,它比我在这种特殊情况下想要实现的要复杂得多。

现在我有一个按钮,当滚动到页面时,其内部的文本状态会发生变化。文本的长度不同,因此按钮必须拉伸或收缩。但当然这会立即发生,我希望它能够平滑地拉伸或收缩。在 Web 中,我们可以轻松地在 CSS 中执行类似的操作;

transition: all 0.3s ease;
Run Code Online (Sandbox Code Playgroud)

当您不想添加额外的动画时,这就足够了。那么 React Native 中这种行为的等价物是什么?

javascript reactjs react-native

1
推荐指数
1
解决办法
4720
查看次数