2

私はゆっくりと React を学び、Redux で実装することも学んでいます。しかし、私は障害物にぶつかったようです。これが私がこれまでに持っているものです。

/index.jsx

import './main.css'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App.jsx'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import ShoppingList from './reducers/reducer'

let store = createStore(ShoppingList)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)

/actions/items.js

import uuid from 'node-uuid'

export const CREATE_ITEM = 'CREATE_ITEM'
export function createItem(item) {
  return {
    type: CREATE_ITEM,
    item: {
      id: uuid.v4(),
      item,
      checked: false
    }
  }
}

/reducers/reducer.js

import * as types from '../actions/items'
import uuid from 'node-uuid'

const initialState = []

const items = (state = initialState, action) => {
  switch (action.type) {
    case types.CREATE_ITEM:
      return {
        id: uuid.v4(),
        ...item
      }
    default:
      return state;
  }
 }

 export default items

/reducers/index.js
更新:

import { combineReducers } from 'redux'
import items from './reducer'

const ShoppingList = combineReducers({
  items
})

export default ShoppingList

/コンポーネント/Item.jsx

import React from 'react';
import uuid from 'node-uuid'

export default class Item extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isEditing: false
    }
  }

  render() {
    if(this.state.isEditing) {
      return this.renderEdit();
    }

    return this.renderItem();
  }

  renderEdit = () => {
    return (
      <input type="text"
        ref={(event) => 
          (event ? event.selectionStart = this.props.text.length : null)
        }
        autoFocus={true}
        defaultValue={this.props.text}
        onBlur={this.finishEdit}
        onKeyPress={this.checkEnter} 
      />
    )
  };

  renderDelete = () => {
    return <button onClick={this.props.onDelete}>x</button>;
  };

  renderItem = () => {
    const onDelete = this.props.onDelete;

    return (
      <div onClick={this.edit}>
        <span>{this.props.text}</span>
        {onDelete ? this.renderDelete() : null }
      </div>
    );
  };

  edit = () => {
    this.setState({
      isEditing: true
    });
  };

  checkEnter = (e) => {
    if(e.key === 'Enter') {
      this.finishEdit(e);
    }
  };

  finishEdit = (e) => {
    const value = e.target.value;

    if(this.props.onEdit) {
      this.props.onEdit(value);

      this.setState({
        isEditing: false
      });
    }
  };
}

/コンポーネント/Items.jsx

import React from 'react';
import Item from './Item.jsx';

export default ({items, onEdit, onDelete}) => {
  return (
    <ul>{items.map(item =>
      <li key={item.id}>
        <Item 
          text={item.text} 
          onEdit={onEdit.bind(null, item.id)}
          onDelete={onDelete.bind(null, item.id)}
        />
      </li>
    )}</ul>
  );
}
//  UPDATE: http://redux.js.org/docs/basics/UsageWithReact.html
// Is this necessary?
const mapStateToProps = (state) => {
  return {
    state
  }
}

Items = connect(
  mapStateToPros
)(Items) // `SyntaxError app/components/Items.jsx: "Items" is read-only`

//////////////////////////////////////
// Also tried it this way. 
//////////////////////////////////////
Items = connect()(Items)
export default Items // same error as above.

これもやってみた

export default connect(
  state => ({
    items: store.items
  })
)(Items) // `Uncaught TypeError: Cannot read property 'items' of undefined`

アップデート：

多くの試行の後、Gitter の @hedgerh は、代わりに state.items にする必要があると指摘しました。だから解決策は

export default connect(
  state => ({
    items: state.items
  })
)(Items)

@aziumにもクレジット。

/コンポーネント/App.jsx

export default class App extends React.Component {
  render() {
    return (
     <div>
        <button onClick={this.addItem}>+</button>
          <Items />
      </div>
    ); 
  } 
}

正しく実装するために、ここで何が欠けていますか? 今のところ、それを言って壊れていUncaught TypeError: Cannot read property 'map' of undefinedますItems.jsx。正しく接続されていないように見えるので、それは理にかなっていると思います。これはアプリの最初の部分で、2 番目の部分ではユーザーが多くのリストを作成できるようになり、これらのリストには多くのアイテムが含まれます。ほぼ同じことを行うItem.jsxため、おそらく からメソッドを抽出する必要があります。List.jsxありがとう

4

1 に答える 1

2

あなたが行方不明connectです。これが、物がストアからコンポーネントに到達する方法です。ドキュメントのコンテナセクションを読んでくださいhttp://redux.js.org/docs/basics/UsageWithReact.html

import React from 'react'
import Item from './Item.jsx'

import { connect } from 'react-redux'

let Items = ({items, onEdit, onDelete}) => {
  return (
    <ul>{items.map(item =>
      <li key={item.id}>
        <Item 
          text={item.text} 
          onEdit={onEdit.bind(null, item.id)}
          onDelete={onDelete.bind(null, item.id)}
        />
      </li>
      })
  </ul>
  )
}

export default connect(
  state => ({
    items: state.items
  })
)(Items)

また、親から関数が渡されることを期待しているようonEditですonDeleteが、そうしていないため、これらの関数は未定義になります。

于 2016-03-28T22:04:28.357 に答える