小编Ber*_*den的帖子

我将 React 应用程序转换为 PWA，并且部分工作正常。

我遵循了本教程：https://medium.com/@toricpope/transform-a-react-app-into-a-progressive-web-app-pwa-dea336bd96e6

然而，本文仅展示如何缓存静态数据，我还需要存储来自服务器的数据，我可以按照本文第一个答案的说明执行此操作：How can I cache data from API to Cache Storage in React PWA ？并将存储数据的 firebase 地址插入到 array 中urlsToCache，并由应存储到缓存中的文件填充。

到目前为止一切都很好，但是在将数据存储到缓存中之后，应用程序将停止从服务器获取数据并仅使用缓存中的数据加载页面，即使服务器已更新也是如此。这就是我需要解决的问题。

简而言之，我需要从服务器获取数据，将其存储到缓存中，以便在应用程序离线时使用它，并在每次到达服务器时更新缓存。

我正在尝试遵循本指南，但没有成功：https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#serving-suggestions

这是我的worker.js 文件：

var CACHE_NAME = 'pwa-task-manager';
var urlsToCache = [
  '/',
  '/completed',
  '/index.html',
  '/static/js/main.chunk.js',
  '/static/js/0.chunk.js',
  '/static/js/1.chunk.js',
  '/static/js/bundle.js',
  '/calculadora',
  'https://calc-marmo.firebaseio.com/clientes.json',
  'https://calc-marmo.firebaseio.com/adm.json',
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and …

我搜索了很多答案，但是没有找到合适的解决方案。

我想使用相同的className来获取所有div内的所有HTML元素，但重要的是它们都应属于同一集合，数组或任何允许我循环遍历的元素。

假设我有两个divs带有名为“ divTest”的类，如果要使用querySelectorAll它，我将获得一个带有两个索引的childList，第一个div为0，第二个为1。它会带给我所有这些元素divs，但它们不会在一起。我想一次访问两个索引。

我通过其索引访问每个元素，并将其放入一个数组中，并在其中进行传播：

submits = document.querySelectorAll(".divTest")[0].children;
submits1 = document.querySelectorAll(".divTest")[1].children;
arrayTeste = [...submits, ...submits1]

它可以工作，但是我想知道是否有直接的方法，例如访问同一代码行上的两个索引？

我有这个数组：

sampleArray = [
  {name: 'product-2'},
  {name: 'product-15'},
  {name: 'product-3'},
  {name: 'product-10'}
]

我想使用属性对其进行排序name，按字母顺序排列，字符串中的数字除外。

我sort结合使用localeCompare：

sampleArray.sort((a, b) => a.name.localeCompare(b.name))

但是，作为name一个包含数字的字符串，我得到了这个：

sampleArray = [
  {name: 'product-10'},
  {name: 'product-15'},
  {name: 'product-2'},
  {name: 'product-3'}
]

考虑到数字，我还需要以正确的顺序获取它。这会是什么：

sampleArray = [
  {name: 'product-2'},
  {name: 'product-3'},
  {name: 'product-10'},
  {name: 'product-15'}
]

我知道如果我只处理数字，我可以做到：

sampleArray.sort((a,b) => a - b)

但事实并非如此。

我该如何解决这个问题？

在我的应用程序中，当我从一个页面更改到另一个页面时，该页面将保持在与上一页相同的位置。我想让它在交换页面时转到顶部。

React-router文档有一个解决方案：https ://reactrouter.com/web/guides/scroll-restoration

我在一个名为的组件中实现了它ScrollToTop，并用它包装了我的整个应用程序，但其中的所有内容都没有被渲染。我不知道为什么。

滚动到顶部：

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

应用程序：

import React from 'react';

import './App.css';

import Layout from './containers/Layout/Layout'
import MainPageConfig from './containers/MainPageConfig/MainPageConfig'

import ScrollToTop from './HOC/ScrollToTop'

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


function App() {
  return (
    
      <BrowserRouter >        
        <Layout>
          <ScrollToTop>
            <Switch>
              <Route path="/" …

我正在尝试创建一个函数来更改数组中项目的位置。

例如，我有这个数组：

[1, 2, 3] - 如果我调用这个函数，我得到这个 => [2, 3, 1]; 如果我再次调用该函数，我应该有这个 => [3, 1, 2]; 下一次它应该再次移动，依此类推。但是相反，如果我第二次调用该函数，我会再次得到这个 => [2, 3, 1];

我怎样才能使这个工作正常？

我知道为什么会发生这种情况，每次我调用该函数时，它都会以相同的顺序接收相同的值，我明白了，这就是为什么我构建了另一个数组（移动）以按当前顺序接收值的原因，这是尝试我第二次调用该函数时使用这个新数组，我尝试使用 if/else 语句，但没有奏效；我还构建了另一个将“move”作为参数传递的函数，它起作用了，但没有任何意义我必须为每次移动都使用不同的函数。

ps 我从 HTML 输入接收值。

<input id="numero1" value="">
<button onclick="moveLeft()">Move</button>


var n1 = document.getElementById("numero1");

function moveLeft() {
    var str = n1.value;
    var arr = str.split('');
    var move = [];
    
    console.log(arr);
    arr.splice(0, 3, arr[1], arr[2], arr[0]);
    console.log(arr);

    for (var i = 0; i < arr.length; i++) {
        move.push(arr[i]);
    }

    console.log(move);
    teste(move);
}


function teste(move) {
    console.log(move);
    move.splice(0, …

我正在构建一个包含多个组件的 React 应用程序，其中至少有一半我正在使用，React-notify并且除了一个之外，几乎所有组件都可以正常工作。在这一次中，当我触发 toast 时，我得到了四个 toast，一个在另一个之后，但我相信它们不是不同的 toast，因为它们具有相同的 ID。

我发现这个线程https://github.com/fkhadra/react-toastify/issues/182，这里用户遇到了和我一样的问题，唯一的例外是我没有设置autoclose，他甚至提供了一个 gif 显示问题：

https://imgur.com/a/8NMMaRa

根据该线程的解决方案是删除所有<ToastContainer />组件并将其呈现在应用程序根目录中，在我的情况下是App.js. 我这样做了，但是不再显示祝酒词，但我不知道我是否做得对。

除此之外，我还尝试设置自定义 ID，但没有任何改变。

我正在使用React-router-dom，也许这会影响某些事情，我无法找到正确的答案，也无法在任何其他来源的文档中找到。

这是我的简化版本App.js：

import Layout from './containers/Layout/Layout';

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

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

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <Route path="/clientes" exact component={ClientesControls} />
            <Route path="/adm" exact component={AdmControls} />
            <Route path="/" component={OrcConfig} />
            <ToastContainer …

我需要将 24 小时添加到将存储在变量中的日期。

例子：

$date = "2019-11-20 05:05:00"; => $date = "2019-11-21 05:05:00";（已添加 24 小时）。

我尝试过一些选择，但没有一个成功。

我尝试过strtotime()方法：

$new_time = date("Y-m-d H:i:s", strtotime('+24 hours')).

如果 sintaxe 与上面类似，那么它可以工作，但它似乎不接受预定义的日期或变量，如下所示：

$date = "2019-11-20 05:05:00";
$new_time = date($date, strtotime('+24 hours'));

或这个：

$new_time = date("2019-11-20 05:05:00", strtotime('+24 hours'));

在这两种情况下，输出与输入日期相同，但不添加 +24。

我已经尝试过该modify()方法。

$date = "2019-11-20 05:05:00";

$dateTime= new DateTime($date);
$dateTime->modify('+24 hours');

print_r($dateTime);

echo $datetime->date;

输出（如果我打印对象）：

DateTime Object
(
    [date] => 2019-11-21 05:05:00.000000
    [timezone_type] => 3
    [timezone] => Europe/Paris
)

2019-11-21 05:05:00.000000

输出（如果我不打印对象）： …

我有一个带有一些文本和图像的容器作为最后一个元素，我试图::after为我的容器设置一个，但是它显示在图像上而不是作为容器的最后一个元素：

我知道我不能将伪选择器设置为<img/>，但在这里我设置::after为容器，我不明白为什么它不能正常工作。

为什么会发生这种情况，我如何才能::after真正制作 的最后一个元素testDiv？

PS 我不能用 设置容器或任何父元素position: relative，因为我需要::after与屏幕具有相同的宽度，而不仅仅是为了适应容器，而且我没有任何与屏幕宽度相同的元素。

PSmargin-left:100px只是为了更容易在片段中看到，因此与我的目的无关。

.testDiv > div::after {
  position: absolute;
  height: 2px;
  content: "";
  background-color: red;
  left: 0;
  right: 0;
}

.testDiv > div {
  margin-left: 100px;
}

<div class="testDiv">
    <div>
      <h1>TEST</h1>
      <h2>TEST</h2>
      <img src="https://www.acmetek.com/wp-content/uploads/rapidssl-logo.png" />
    </div>
</div>

我正在使用useSelector钩子来检索我的减速器的值，但它导致我的应用程序上出现大量不必要的渲染。

我在组件上使用哪个属性并不重要，因为它们都state从减速器获取相同的对象，每次一个属性更改时，useSelector都会渲染所有使用的组件。

这是减速机：

const initialState = {
   productsDataState: [], // => this is populated by multiple objects
   searchProducts: [],
   isSearchOn: false,
   inputValue: '',
   listOrder: [],
   toastify: ['green', ''],
   toastifyOpen: false
}

const reducer = ((state = initialState, action) => {
   switch (action.type) {
      case actionTypes.UPDATE_PRODUCT:
         return {
            ...state,
            productsDataState: action.products,
            listOrder: action.listOrder
         }
      case actionTypes.SET_TOASTIFY:
         return {
            ...state,
            toastify: action.toastify,
            toastifyOpen: action.open
         }
      case actionTypes.SET_SEARCH:
         return {
            ...state,
            searchProducts: action.searchProducts,
            isSearchOn: action.isSearchOn,
            inputValue: action.inputValue …

我试图Animate.css在 React 中实现，在我的研究中，我发现这个包react-animated-css似乎很简单，但我无法让它工作。

在文档中（如果可以将其称为文档），据说用户应该Animate.css在 HTML 页面中包含 ，我没有这样做，因为我正在使用 React 并且没有 HTML 页面，但是我安装了animate.css 通过 npm。

下面是我的代码示例：

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  render () {

   return (
    <div>
      <Animated 
         animationIn="fadeInDown" 
         animationOut="zoomOut" 
         animationInDuration={1000} 
         animationOutDuration={1000} 
         isVisible={true}
      >
          <h1 style={{backgroundColor: 'red'}}>TESTE 1</h1>
      </Animated>
    </div>
   )
 }
}

我也尝试isVisible使用状态动态设置，但没有任何成功：

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  state = {animacao: false}

  toggleAnimation = () => {

     let animacao = !this.state.animacao
     this.setState({animacao})
  }

  render () …

我正在尝试使用自定义挂钩来调用将用于多个组件和上下文的函数。但是，钩子永远不会更新上下文值，它始终是一个空数组，但在上下文中，用作上下文值的状态会被更新，并且在组件中会接收上下文值。这里发生了什么？

在我看来，上下文值没有被传递给钩子，但我不明白为什么。

这是我的代码示例：

语境：

import { createContext, useState, useEffect } from "react";
import useTest from "./useTest";

const TestContext = createContext({
  test: [],
  testContextFn: () => {}
});

export const TestProvider = ({ children }) => {
  const [testState, setTestState] = useState([]);

  const { testFn } = useTest();

  const testHandlerHandler = () => {
    const test = 1;
    setTestState((current) => [...current, test]);
    testFn();
  };

  const contextValue = {
    test: testState,
    testContextFn: testHandlerHandler
  };

  useEffect(() => {
    console.log("state: ", testState); // => …