小编dra*_*agi的帖子

所以我正在为我的Item组件编写一个测试ItemCard，然后尝试渲染该组件，然后使用该包装器创建快照，但是它返回一个空ShallowWrapper {}

请查看代码以获取更多信息：

Item.test.js

import { shallow } from 'enzyme';
import { ItemCard } from '../Item';

const fakeItem = {
  id: 'aksnfj23',
  title: 'Fake Coat',
  price: '40000',
  description: 'This is suuuper fake...',
  image: 'fakecoat.jpg',
  largeImage: 'largefakecoat.jpg',
};

describe('<ItemCard/>', () => {
  it('renders and matches the snapshot', () => {
    const wrapper = shallow(<ItemCard me item={fakeItem} showButtons />);

    // console.log(wrapper.debug());
    expect(wrapper).toMatchSnapshot();
  });
});

它创建的快照：

// Jest Snapshot v1

exports[`<ItemCard/> renders and matches the snapshot 1`] = `ShallowWrapper {}`; …

我正在学习React,我在项目中安装了Eslint.它开始给我错误

Use callback in setState when referencing the previous state. (react/no-access-state-in-setstate)
Must use destructuring state assignment (react/destructuring-assignment)

我试着查看一下,但无法正确理解.

有人能指出我正确的方向吗？

这是我抛出错误的代码:

class LoginForm extends React.Component {
  state = {
    data: {
      email: "",
      password: "",
    },
    loading: false,
    errors: {},
  };

  onChange = e =>
    this.setState({
      data: { ...this.state.data, [e.target.name]: e.target.value },
    });

  onSubmit = () => {
    const errors = this.validate(this.state.data);
    this.setState({ errors });

    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props
        .submit(this.state.data)
        .catch(err =>
          this.setState({
            errors: err.response.data.errors, …

我今天早些时候试图用纱安装一个包，我明白了

yarn install
yarn install v1.9.4
[1/4]   Resolving packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/eslint: getaddrinfo ENOTFOUND     registry.yarnpkg.com registry.yarnpkg.com:443".
info If you think this is a bug, please open a bug report with the information provided …

我的问题不像标题那么简单。我试图显示一个加载组件 1 秒，然后用实际数据替换该组件。

这是我的代码：

const TopNavigationAuth = () => (
<Container>
    <Menu.Item
        name="landing"
        content="Landing"
        as={Link}
        to={routes.LANDING}
    />
    <Menu.Item name="home" content="Home" as={Link} to={routes.HOME} />
    <Menu.Menu position="right">
        <Menu.Item
            name="account"
            content="Account"
            as={Link}
            to={routes.ACCOUNT}
        />
        <UserSection />
        <Menu.Item
            name="signout"
            content={
                <Button
                    content="Sign Out"
                    onClick={authFunctions.doSignOut}
                    primary
                />
            }
        />
    </Menu.Menu>
</Container>
);

所以这里我有一个<UserSection />组件，它基本上只保存用户的图片和姓名（现在）。我想在 1 或 2 秒后加载该组件，但在那之前我想显示一个微调器。

我正在为我的应用程序使用语义 ui react，它们有一个方便的微调器，如下所示：

const LoaderExampleInlineCentered = () => <Loader active inline='centered' />

我可以请一些指导吗？

我知道我们有一个与此类似但不完全相同的问题。我试图让我的函数工作，它接受一个字符串作为参数并将其转换为 snake_case 。它大部分时间都适用于所有花哨的!?<>=字符，但有一种情况无法转换，并且它的 camelCase 。

当我传递像snakeCase. 它返回snakecase而不是snake_case.

我试图实现它，但我最终只是把它搞砸了。

请问我有什么帮助吗？

我的代码：

const snakeCase = string => {
    string = string.replace(/\W+/g, " ").toLowerCase().split(' ').join('_');

    if (string.charAt(string.length - 1) === '_') {
        return string.substring(0, string.length - 1);
    }

    return string;
}