小编Red*_*ron的帖子

所以我是 redux-toolkit 的新手，我想做一些非常简单的事情。我想通过这个辅助函数在 POST 请求上发送一些数据。所以我尝试了这个

export const submitPaymentToServer = createAsyncThunk(
    'data/fetchAll',
    async ({ name, data }) => {
        return fetch('/payments', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name,
                data,
            }),
        })
            .then((res) => res.json())
            .then((res) => res)
    },
)

但当我这样称呼它时

    dispatch(
        submitPaymentToServer({
            name,
            data,
        }),
    )

typescript 抱怨说我没有正确数量的参数。那么我该如何将参数传递给这个函数呢？或者使用工具包执行此操作的方法是什么？

我想知道如何在 create-react-app 中生成源映射？它们是隐式完成的吗？他们是否住在构建文件夹中

我已经阅读了很多关于它们是用 webpack 生成的，但我的应用程序没有使用它，所以我想知道如果没有 webpack 怎么办？

我也不想弹出

我有经典的 Lerna 设置。根目录，packages文件夹，2个子目录

我只想yarn install在一个包中运行，然后安装这个包的依赖项。出于某种原因，当我运行它时（甚至从这个文件夹中），它正在安装node_modules在根、packageA 和 packageB 中。

有没有解决方案只允许我node_modules为所选目录安装？

我有这个网格 CSS

.grid {
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: repeat(3, 1fr);
}

它位于宽度为 500px 的 div 中

但我注意到网格中的第一个项目“拥抱”了 div 的左边缘，但最右边的项目没有接触 div 的边缘。

在 Flexbox 中，我可以通过（接近足够）实现这一点：

.flex {
    display: flex;
    justify-content: space-between;
 }

如何使用网格响应式地执行此操作？

我知道我可以更改网格列间隙，但这看起来很不稳定

这是我的测试

    it('should run', async () => {
        const { container } = renderWithContainers(<Wrapper  />)

        window.innerHeight = 50
        await wait(() => fireEvent(window, new Event('resize')))

        expect(getByTestId(container, 'myComponent')).toHaveStyle(`position: relative`)
    })

这失败了，因为原始位置是fixed并且我清楚地使用了container在调整大小事件触发之前定义的......那么我怎样才能让它“重新渲染”以使用更新的容器？在我的代码中，一旦它重新渲染，它就会有一个不同的位置（只是不在测试中）

我已经这样做了：

const { container, rerender } = renderWithContainers(<Wrapper  />)
window.innerHeight = 50
await wait(() => fireEvent(window, new Event('resize')))

rerender(<Wrapper />

但这会中断，invariant Violation: Could not find "store" react testing library但我已经将所有存储/提供程序逻辑都包含在里面，renderWithContainers那么我该如何重用它呢？

我想做这样的事情：rerender(renderWithContainers(<Wrapper />))但显然这行不通

只是为了非常清楚，我想在事件侦听器触发后重新渲染我的组件，以便我可以看到更新的组件

我有一个.eslintrc包含以下规则的文件：

"rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "no-console": "warn"
},

我已经安装了：eslint-plugin-prettier和eslint-config-prettiereslint-plugin-react-hooks

"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],我已经在 vscode 的 settings.json 中启用

但是当我删除 a 中所需的依赖项时useEffect，它没有显示我希望的错误

我还需要做什么？

我正在尝试将我的react应用程序移动到react-typescript应用程序。首先，这似乎很棘手，令人失望

我遇到的问题是我的控制台出现打字稿错误。我正在尝试通过更改tsconfig.json文件来修复它们

但是无论何时执行并重新启动服务器，我都会在控制台中收到一条消息，说：the following changes are being made to your tsconfig.json file 然后列出更改，这些更改基本上"undos"是我刚刚添加或更改的内容。为什么要这样做？

这是一个create-react-app项目，我按照以下步骤迁移到打字稿： https://facebook.github.io/create-react-app/docs/adding-typescript

我有来自 React geocharts 的基本地理图表

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    getSelection={(e) => console.log('test')}
    select={console.log('test')}
    enableRegionInteractivity={true}
    regionClick={(e) => console.log('test')}
    onClick={(e) => console.log('test')}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

但我不知道当用户点击一个国家/地区时我需要做什么来调用事件？我尝试通过上述所有方法记录内容，但没有任何效果

另外，作为旁注，当该国家/地区已传递到我的地图中时，它似乎只显示悬停的国家/地区。是否可以为所有国家/地区打开它？

我一直在遵循本指南：https : //create-react-app.dev/docs/analyzing-the-bundle-size/并且即将运行该analyze命令以查看我的应用程序有多大。这是在 React/JS 中检查包/构建大小的最佳方法吗？

还有一种方法可以不包含生产版本中的某些文件吗？喜欢测试？CRA 会自动处理吗？

我编写了一个自定义挂钩来帮助我不重复某些获取调用的代码。它看起来像这样：

export const useCustomQuery = ({ endpoint, body, dataPoint }: args) => {
    const [data, setData] = useState()
    useEffect(() => {
        fetch(`http://localhost:4000/${endpoint}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body,
        })
            .then((res) => res.json())
            .then((res) => {
                if (dataPoint) {
                    setData(JSON.parse(res.data[dataPoint]))
                }
            })
    }, [endpoint, body, dataPoint])

    return { data }
}

但我收到一些 TS 错误，抱怨数据类型。是否可以将类型作为参数传递，因为调用钩子的每个组件可能会有所不同？或者解决这个问题的最佳方法是什么？