小编Dor*_*mon的帖子

import React from 'react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { render, screen, fireEvent } from '@testing-library/react';
import MyApp from './MyApp ';

const initialState = {};
const mockStore = configureStore(initialState);

describe('<MyApp />', () => {
  it('click button and shows modal', () => {
    render(
      <Provider store={mockStore}>
        <MyApp />
      </Provider>
    );

    fireEvent.click(screen.getByText('ADD MIOU'));
    expect(queryByText('Add MIOU Setting')).toBeInTheDocument();
  });
});

我正在使用 jest 和 redux 工具包reactjs，并尝试模拟商店来编写测试。但出现以下错误

类型错误：store.getState 不是函数

有没有什么办法解决这一问题？我错过了什么吗？

我需要导入一个 npm 包，但当我使用这样的“import”语句时失败

import { cuteLuna } from 'lunacomponent';

我收到一个错误：无法在模块外部使用 import 语句

当我将其更改为动态导入后，它就可以工作了。

const cuteLuna = dynamic(() => import('lunacomponent').then((a) => a.cuteLuna), {ssr: false});

我的问题是，为什么我应该使用动态导入而不是通常的导入？

谢谢！！

我有一个组件，我设置了一个计数，并在单击按钮时让状态更新。但是当我检查渲染时间时，每次单击按钮时它都会渲染两次。

https://codesandbox.io/s/brave-forest-yre6y?file=/src/App.js

export default function App() {
  const cute = Array(10).fill({});
  const [count, setCount] = useState(2);
  console.log(count);
  return (
    <div className="App">
      <button
        onClick={() => {
          if (count < 10) setCount(count + 1);
        }}
      >
        add
      </button>
      {cute.map((data, index) => {
        if (index < count) {
          return (
            <div>
              <p>{index}. Luna is cute</p>
            </div>
          );
        }
      })}
    </div>
  );
}

我想知道：

1. 为什么会这样呢？
2. 我怎样才能防止这种情况发生？

“我阅读了文档，其中指出将 opengraph-image.(jpg|jpeg|png|gif) 图像文件添加到任何路线段。我将 opengraph-image.png 放在应用程序的根目录中，但是在构建之后它没有为我生成 og 图像标签。有什么想法吗？

我希望它可以在index.html中为我生成og图像标签

我正在阅读 React hooks 的示例。我发现他们写

setCount(count + 1)

但我通常这样写

setCount(prev => prev + 1)

有什么区别吗？哪一个更好？