小编Ker*_*men的帖子

我有以下组件触发了no-shadowESlint错误FilterButton props.

import { setFilter } from '../actions/filter';


function FilterButton({ setFilter }) {
  return (
    <button onClick={setFilter}>Click</button>
  );
}

export default connect(null, { setFilter })(FilterButton);

如何在保持简洁语法mapDispatchToProps和ESlint规则的同时避免警告？

我知道我可以添加注释来抑制警告,但是对每个组件执行此操作似乎都是多余且乏味的.

我正在使用样式系统，库的一个关键是使用速记道具来实现简单快速的主题化。

我已经简化了我的组件，但这里是有趣的部分：

import React from 'react'
import styled from 'styled-components'
import { color, ColorProps } from 'styled-system'

const StyledDiv = styled('div')<ColorProps>`
  ${color}
`

const Text = ({ color }: ColorProps) => {
  return <StyledDiv color={color} />
}

我在color道具上有一个错误，上面写着：

输入'字符串| (string | null)[] | undefined' 不能分配给类型 'string | (string & (string | null)[]) | 不明确的'。

我认为这是因为styled-system使用与本机 HTML 属性相同的命名color并且它冲突。

我该如何解决这个问题？

我的应用程序中有2条路线/validations(这是一个列表)和/validations/:id(这是一个专注于特定项目的列表).

我最初静态地写了我的路线,一切正常(如预期的那样):

<Route path="/validations/:id" component={Validations} />
<Route path="/validations" component={Validations} />

但是,因为我想进行一些重构,所以我将路由放在一个数组中并使用它.map来渲染它们.但是有了这个,当我点击一个项目时,整个页面都会重新呈现并且我丢失了列表的滚动(这对用户来说是一个糟糕的用户体验,因为他失去了他在列表中的位置):

const routes = [
  {
    path: '/validations/:id',
    component: Validations,
  },
  {
    path: '/validations',
    component: Validations,
  },
]

// ...and in the JSX...

{routes.map(({ path, component }) => (
  <Route
    key={path}
    path={path}
    component={component}
  />
))}

更奇怪的是,如果我删除了我的key支持,Route我会回到最初的行为(但我有一个React的警告).

我写错了吗？它是反应路由器的错误吗？一个反应？

如何通过路线映射保留列表的滚动？

这是一个复制:https://codesandbox.io/s/vm71x2k46l

我试图让用户登录我的应用程序.我尝试了几种技术,但我不知道如何在应用程序启动时将数据读回状态.

现在我有以下内容:

const getInitialState = () => {
    var _initState = {
        auth: new AuthInitialState(),
        global: (new GlobalInitialState())
    };

    return _initState;
};

export default function configureStore() {


    const store = createStoreWithMiddleware(reducer, load(APP_STORAGE) || getInitialState());

    store.subscribe(() => {
        if(!load('debug')) {
            save(APP_STORAGE, store.getState());
        }
    });

    return store;
};

const createStoreWithMiddleware = applyMiddleware(
    thunk,
    localStorageMiddleware,
    logger
)(createStore)

其中load和save方法负责将数据保存到AsyncStorage(使用react-native-simple-store)

export const load = (key) => {
    return store.get(key);
}

export const save = async (key, data) => {
    store.save(key, JSON.stringify(data));
}

我的根的渲染是当前的:

render() { …