相关疑难解决方法(0)

这似乎是显而易见的,但我发现自己对于何时使用花括号在ES6中导入单个模块感到困惑.例如,在我正在处理的React-Native项目中,我有以下文件及其内容:

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

在TodoReducer.js中,我必须在没有花括号的情况下导入它:

import initialState from './todoInitialState';

如果我initialState用大括号括起来,我会得到以下代码行的错误:

无法读取未定义的属性待办事项

export default function todos(state = initialState.todo, action) {
// ...
}

使用花括号的组件也会发生类似的错误.我想知道何时应该使用大括号进行单次导入,因为很明显,当导入多个组件/模块时,你必须将它们用大括号括起来,我知道.

编辑:

所谓张贴在这里并没有回答我的问题,而不是我问的时候我应不应该用花括号用于导入单个模块,或者我不应该用花括号中ES6导入单个模块(这显然不是例如,我已经看过需要花括号的单个导入)

我有一个带有2列的antd表，需要在第一列上进行过滤，并在第二列上搜索文本。

根据我的代码，该应用程序呈现良好。请注意，标签字段是一个json数组，而不是文本字段，因此我想这与错误有关。

更新了1个代码。

import React, { Component } from 'react';
import {  Table, Tag, Button, Icon, Input} from 'antd';
import { adalApiFetch } from '../../adalConfig';
import Notification from '../../components/notification';
import Highlighter from 'react-highlight-words';

class ListPageTemplatesWithSelection extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            filteredInfo: null,
            sortedInfo: null,
            searchText: ''
        };
        this.handleChange= this.handleChange.bind(this);
        this.clearFilters= this.clearFilters.bind(this);
        this.clearAll= this.clearAll.bind(this);
        this.getColumnSearchProps= this.getColumnSearchProps.bind(this);
        this.handleSearch= this.handleSearch.bind(this);
        this.handleReset= this.handleReset.bind(this);

    }

    handleSearch (selectedKeys, confirm){
      confirm();
      this.setState({ searchText: selectedKeys[0] });
    }

    handleReset(clearFilters){
      clearFilters();
      this.setState({ searchText: '' …

这是一个典型的反应问题,但我有点不知道如何处理它.我只是想动态渲染我的表格行但是我得到错误:""未捕获错误:不变违规:processUpdates():无法找到元素的子元素2.这可能意味着DOM意外地发生了变异(例如,通过浏览器),通常是由于在使用表时忘记了一个,嵌套标签如,

,或,或在父母中使用非SVG元素.尝试使用React ID检查元素的子节点.2.1.0."

我理解反应是找不到合适的DOM东西但是如何处理呢？提前致谢 !

<div className="panel-body" style={panelstyle}>
              <Table striped bordered condensed hover>
                <thread>
                  <th> Currency </th>
                  <th> Amount </th>
                  <th> Issuer </th>
                  <th> Limit </th>
                  <th> Limit Peer </th>
                  <th> No-Ripple </th>
                </thread>
                <tbody>
                  {this.state.ripplelines[this.address] ?

                              this.state.ripplelines[this.address].lines.map(function(line,i) {

                            return      (<tr>
                                          <td> USD </td>
                                          <td> 1500 </td>
                                          <td> raazdazdizrjazirazrka?rkazrâkrp </td>
                                          <td> 1000000000 </td>
                                          <td> 0 </td>
                                          <td> True </td>
                                        </tr>)       
                            ;
                        })             
                  : ""}
                </tbody>
              </Table>
            </div>

我在这里要完成的是合并这两个教程(x)(x),以创建一个具有自定义图标的简单TabBar.我正在尝试使用react-native-vector-icons库中的图标,我已将其添加到我的节点模块中.但是,我遇到了一个障碍:

不变违规:元素类型无效:期望一个字符串(对于内置的>组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.

检查ProfileTabs的render方法.

此错误位于:在RCTTabBar中(在TabBarIOS.ios.js:82)

在TabBarIOS中(在App.js:19)

在ProfileTabs中(在App.js:80)

在ProfileApp中(在registerRootComponent.js:35)

在RootErrorBoundary中(在registerRootComponent.js:34)

这是相关的代码:

import React, { Component } from 'react';
import { AppRegistry, Image, StyleSheet, TabBarIOS, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

var Profile = require('./profile');
var Repositories = require('./repositories');
var Following = require('./following');
var Followers = require('./followers');

class ProfileTabs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'profile'
        };
    }
    render() {
        return (
            <TabBarIOS
                selectedTab={this.state.selectedTab}>
                <Icon.TabBarIOS
                    selected={this.state.selectedTab === 'profile'}
                    title="Profile"
                    iconName='ios-home-outline'
                    onPress={() => { …

我在文件./MyInput.react.js中有以下ReactJs组件

import React from 'react';

export default class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.id = getNextId();

    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    this.props.onChange(e.target.value);
  }
  render() {
    return (
      <label htmlFor={this.id}>
        {this.props.label}      
        <input
          id={this.id}
          value={this.props.value} 
          onChange={this.onChange}
          />
      </label>
    );
  }
}

现在我尝试将它导入./index.js,如下所示:

import {MyInput} from './MyInput.react';

控制台返回错误:

Error: Minified React error #130

您刚刚遇到的错误的全文是:

Element type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got: undefined.

这有什么问题？

Reactjs 上下文提供程序错误

我收到以下错误

invariant.js:42 未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

这是我的 app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { UserProvider } from "./lib/user.js"

const App = () => <UserProvider></UserProvider>

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

这是./lib/user.js：

import React from 'react'

export const UserContext = React.createContext({
  user: null,
  logIn: ((token, user) => {}),
  logOut: (() => {})
})

export class UserProvider extends React.Component {
  constructor(props) {
    super(props)

    this.logIn = (token, user) => {
      setToken(token)
      this.setState(state => ({user: user}))
    }

    this.logOut = (client) …