小编m00*_*m00的帖子

我正在使用 next.js 样式组件的全局样式，每次我重新加载我的页面时，我都能看到字体闪烁。

我有我的字体文件 public/fonts/Inconsolata

我在频谱聊天中到处寻找，next.js github问题，但似乎找不到任何解决方案。

页面/index.js

import styled from 'styled-components';

const H1 = styled.h1`
  font-family: 'Inconsolata Bold';
  font-weight: 700;
  color: #000;
`;

const index = () => {
  return (
    <div>
      <H1>font flashes</H1>
    </div>
  );
};

export default index;

页面/_app.js

import App from 'next/app';
import React from 'react';

import GlobalStyle from '../src/style/globalStyle';

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <GlobalStyle />
        <Component {...pageProps} />
      </>
    ); …

我遵循 next.js 文档并在现在的服务器上添加了一个自定义 api 密钥。

问题是当我运行now dev并转到源选项卡时，我可以在那里看到我的 api 密钥。

api 密钥保存在.env.build文件中，这是我的代码：

索引.js

import { useState, useEffect } from 'react';
const axios = require('axios');

import Nav from '../src/components/Nav';
import Head from '../src/components/Head';
import Movies from '../src/components/movies';

const key = process.env.API_KEY;

const index = () => {
  const [currentMovies, setCurrentMovies] = useState([]);

  const getTopMovies = async url => {
    const fetchData = await axios.get(url).then(response => {
      const [...data] = response.data.results;
      setCurrentMovies({ data: data });
    });
  };

  useEffect(() => …

如果只有部分状态发生变化，有没有办法停止反应重新渲染？

问题是，每次我将鼠标悬停在标记上时，都会打开或关闭弹出窗口，这会导致所有标记重新渲染，即使mystate没有更改，只有activePlace状态正在更改。console.log(myState);每次我将鼠标悬停在标记内和外时都会运行。

我尝试使用 useMemo 挂钩，但不知道如何使用它。有什么帮助吗？

这是我的代码：

import React, { useEffect, useState } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';
import { Icon } from 'leaflet';

const myicon = new Icon({
  iconUrl: './icon.svg',
  iconSize: [20, 20]
});

const MyMap = () => {
  const [myState, setMyState] = useState(null);
  const [activePlace, setActivePlace] = useState(null);

  const getData = async () => …