小编Lin*_*ste的帖子

我正在用打字稿做一个 redux-toolkit 教程。但我是打字稿初学者。

我不知道这里出了什么问题。请给我你的见解。

这是一条错误消息。: TS2322: 类型“number”不可分配给类型“void |” 状态| 可写草稿'。

import {CaseReducer, createSlice, PayloadAction} from "@reduxjs/toolkit";

type State = {
  value: number
}
const increment: CaseReducer<State,PayloadAction<number>> = (state, action) => state.value + action.payload; // error line

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment,
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

export const {increment, decrement, incrementByAmount} = counterSlice.actions;

export default counterSlice.reducer;

在我所有的分享按钮中，我的图片不只显示网址

在我的公共文件夹 html 标题中

    <meta content="`%PUBLIC_URL%/${picture.jpg}`">
    <meta property="og:description" content='' />

在我的详细信息组件中，我使用 react-helmet t 动态地将标题放在共享按钮的位置。

  render() { 
    const { project, auth } = this.props;
    const shareUrl = window.location.href; 
    const articleId = this.props.match.params.id; 
    const {pathname} = this.props.location;
    const imageURL = '';

    if (project) {

      return (
        <div className="container">

头盔组件

          <Helmet>
              <meta charSet="utf-8" />
              <title>{project.title}</title>
              <meta property="og:url" content={`https://l.facebook.com/l.php?u=https%3A%2F%2F${shareUrl?shareUrl:''}`} />
              <meta property="og:description" content={project.title} />
              <meta property="og:image" content={imageURL!==''?`${project.pictureUrl}`: ''} />
              <meta property="fb:app_id" content="198985484382564" />
          </Helmet>

当分享到脸书时，我得到了什么

苏丹抗议者与警方发生冲突，8 人死亡https://firebasestorage.googleapis.com/v0/b/dsdnewsapi.appspot.com/o/projectPics%2F824b9ec1-e708-455e-acce-9bbd40d2b24a.JPG?alt=media&token=1837f -5cc3-4596-8373-d74f6699799a

只是图片网址，但图片没有显示。

            <FacebookShareButton
              url={shareUrl}
              imageURL={project.pictureUrl}
              quote={project.title} …

当我有一个具有嵌套可选字段的对象时，例如：

type FormState = {
  aaa?: {
    bbb?: {
      ccc?: number
    }
  }
}

当我想aaa.bbb.ccc在打字稿中设置值时，我必须：

import produce from "immer";

const formState: FormState = {}

const target = produce(formState, draft => {
  draft.aaa = draft.aaa ?? {}
  draft.aaa.bbb = draft.aaa.bbb ?? {}
  draft.aaa.bbb.ccc = 1;
})

有什么办法可以让它变得更简单吗？

可选的链接语法在这里不起作用：

draft?.aaa?.bbb?.ccc = 1;  // compilation error

一个小演示：https://github.com/freewind-demos/typescript-immer-set-value-to-nested-optional-fields-demo

我使用 Material UI 为我的 React 应用程序制作了所有 CSS 样式。

在 VSCode 编辑器中按F12或command+ 左键单击时，我无法跳转到 CSS。

我希望跳转到outer样式对象的属性。

样式代码在这里：

import {
  createStyles,
  createTheme,
  makeStyles,
  Theme,
} from "@material-ui/core";
import { CreateCSSProperties } from "@material-ui/core/styles/withStyles";

const theme = createTheme();

export const outer: CreateCSSProperties<{}> = {
  width: "100%",
  height: "100%",
  display: "flex",
  flexDirection: "row",
};

export const topStyles = makeStyles((theme: Theme) =>
  createStyles({
    outer: outer,
  })
);

通常，VSCode 应该在按F12或command+ 左键单击时跳转原始代码。

我怎样才能启用这种行为？

我的文件夹中有一些图像，我尝试循环播放它。例如，一个名为“coupons”的文件夹有一些图像，如“coupon1.png”、“coupon2.png”、“coupon3.png”......然后在一个组件中，我尝试创建一个函数来导入所有图像并返回

<img src={coupon1} alt='coupon1' className="slide" />
<img src={coupon2} alt='coupon2' className="slide" />
<img src={coupon3} alt='coupon3' className="slide" />
.....

我可以知道什么是一个好方法吗？如何避免一张一张导入图片？如何获取文件夹中图像文件的总数？

import coupon1 from '../assets/coupons/coupon1.png';
import coupon2 from '../assets/coupons/coupon2.png';
import coupon3 from '../assets/coupons/coupon3.png';
...

以及如何循环它们？我尝试使用模板字符串，但它以字符串结尾而不是变量，所以仍然不起作用。太感谢了！

我已经看到注销后清除/重置商店的解决方案，但不明白如何为以下设置 redux 商店的方式实现相同的功能。

商店.js：

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import authReducer from './ducks/authentication'
import snackbar from './ducks/snackbar'
import sidebar from './ducks/sidebar'
import global from './ducks/global'
import quickView from './ducks/quickView'
import profileView from './ducks/profileView'

const store = configureStore({
  reducer: {
    auth: authReducer,
    snackbar,
    sidebar,
    global,
    quickView,
    profileView,
  },
  middleware: [...getDefaultMiddleware()],
})

export default store

以下是使用@reduxjs/toolkit 中的 createAction 和 createReducer 实现所有 reducer 的方法。

小吃店.js：

import { createAction, createReducer } from '@reduxjs/toolkit'

export const handleSnackbar = createAction('snackbar/handleSnackbar')

export const openSnackBar = …

我正在一个站点上工作，该站点使用zustand将全局状态存储在文件中。我需要能够在类组件中设置该状态。我可以使用钩子在功能组件中设置状态，但我想知道是否有办法将 zustand 与类组件一起使用。

如果有帮助，我已经为此问题创建了一个沙箱：https : //codesandbox.io/s/crazy-darkness-0ttzd

在这里，我在功能组件中设置状态：

function MyFunction() {
  const { setPink } = useStore();

  return (
    <div>
      <button onClick={setPink}>Set State Function</button>
    </div>
  );
}

我的状态存储在这里：

export const useStore = create((set) => ({
  isPink: false,
  setPink: () => set((state) => ({ isPink: !state.isPink }))
}));

如何在类组件中设置状态？：

class MyClass extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <button
          onClick={
            {
              /* setPink */
            }
          }
        >
          Set State Class
        </button> …

考虑以下代码，其中第 2 行失败并显示Property 'newProperty' does not exist on type 'WritableDraft<MyObject>'. TS7053

// data is of type MyObject which until now has only a property myNumber
const payload = produce(data, (draft) => {    
  draft['newProperty'] = 'test';              // Property 'newProperty' does not exist on type 'WritableDraft<MyObject>'.  TS7053
});                                           

如何动态地将新属性添加到草稿或将草稿的类型更改为已包含 的类型newProperty？我不想newProperty在MyObject类型本身中拥有。

我在以前的版本中看到您可以使用以下方式访问它：

const columns = [
  {
    Header: "Name",
    accessor: "name",
    Cell: (e) => {
      return e.original.name;
    }
  }
];

但在 v7 中它不起作用。

我正在使用 typescript 和 redux-toolkit （主要使用 createSlice）开发我的第一个应用程序。
看起来我正在使用今天被认为是良好实践的东西，但最终我发现它并不真正具有可读性（我指出我是一名经验丰富的开发人员，并且我练习过许多其他语言。刚刚接触 React Native ，然后我习惯了良好的编码实践和记录良好的代码），并且找不到从代码和注释生成有效文档的好方法（我尝试过 typedoc）。
有人对此有什么建议吗？最好是一个易于阅读的示例 redux-toolkit 切片文件？

为了说明这一点，下面是我的文件今天的样子的示例。我向减速器“refreshEventsList”添加了注释，但 typedoc 未将其检测为文档。

import {createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
import {callAPI} from '../../api/APIManager';

export interface EventType {
  id: string;
  title: string;
}

interface EventsState {
  events: EventType[];
}

const initialState = {events: []} as EventsState;

/**
 * Load all events and update intern events data
 */
export const loadEvents = createAsyncThunk('events/fetchAll', async () => {
  const response = await callAPI({path: 'api/test'});
  return response.data as EventType[];
}); …