Question

我正在尝试使用Redux创建我的第一个应用程序，我已经在没有Redux的情况下创建了这个版本，我知道Redux不一定需要这个，但我想学习Redux。

我有一个商店，里面有一系列待办事项，我的行动成功发送并更新商店。

我的任务组件列表连接到商店，并将数组中的每个项目呈现为自己的组件。

在初始加载时，我的待办事项列表显示了商店初始状态下的待办事项，但是一旦我更新了状态，就不会呈现状态中的新项目。相反，返回组件数组的map方法表示它'无法读取未定义'的属性'map'。

我该如何解决这个问题？

干杯。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import Container from './components/Container.js'
import TaskReducer from './reducers/Task.js'

require("./index.css");

const defaultState = {
  items: [
    "task 1",
    "task 2"
  ]
};

const store = createStore(TaskReducer, defaultState);

// Allows access to store in console log
window.store = store;

ReactDOM.render( (
  <Provider store={store}>
    <Container />
  </Provider>
  ),
  document.getElementById('wrapper')
);

import React from 'react';
import ReactDOM from 'react-dom';
import TaskList from './TaskList.js';
import { createStore, bindActionCreators } from 'redux';
import * as ActionCreators from '../actions/Task.js';
import Redux from 'redux';
import {connect} from 'react-redux'

class Container extends React.Component {
  constructor() {
    super();
  }

  render() {
    // What does this do???
    const {dispatch} = this.props;
    const deleteItem = bindActionCreators(ActionCreators.deleteTodoItem, dispatch);
    const addItem = bindActionCreators(ActionCreators.addTodoItem, dispatch);

    function _onSubmit(e) {
      e.preventDefault();
      addItem(e.target.elements.task.value);
      // Resets the form
      e.target.reset();
    }

    return (
      <div className="">
        <header className="header">
          <h1>To Do:</h1>
        </header>
          <form autoComplete="off" onSubmit={_onSubmit}>
            <input name="task" placeholder="Task" autoComplete="off"></input>
          </form>
          <TaskList />
      </div>
    );
  }
}

const mapStateToProps = state => (
	{
		items: state.items
	}
);

export default connect(mapStateToProps)(Container);

import React from 'react';
import Task from './Task';
import { connect } from 'react-redux';

let TaskList = (props) => {
  console.log('items', props.items);
  var tasks = (props.items).map( (item, key) => { return <Task data={item} key={key} listItemKey={key} /> })

  return(
    <ul className="task-list">
      {tasks}
    </ul>
  );
}

const mapStateToProps = state => (
	{
		items: state.items
	}
);

export default connect(mapStateToProps)(TaskList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import * as action from '../actions/Task.js'

export default function toDoItems(state = [], action) {
  switch(action.type) {
    case 'DELETE_ITEM':
      return [
        ...state,
      ];

    case 'ADD_ITEM':
      console.log('ADD ITEM');
      console.log('Submitted value = ', action.submittedValue)
      return [
        ...state,
        // Reducer gets action object item and appends to array
        action.submittedValue
      ]

    default:
      return state;
  }
}

---减速机---

import * as action from '../actions/Task.js'

export default function toDoItems(state = [], action) {
  switch(action.type) {
    case 'DELETE_ITEM':
      return [
        ...state,
      ];

    case 'ADD_ITEM':
      console.log('ADD ITEM');
      console.log('Submitted value = ', action.submittedValue);
      console.log('the state', state);
      return [
        ...state,
        // Reducer gets action object item and appends to array
        action.submittedValue
      ]

    default:
      return state;
  }
}

---行动---

export function addTodoItem(submittedValue) {
  return {
      type: 'ADD_ITEM',
      // The action object returned has the submittedValue
      submittedValue
  }
}

export function deleteTodoItem() {
  return {
      type: 'DELETE_ITEM',
  }
}

Answer 1

我编辑了TaskList组件。您没有正确使用地图功能

import React from 'react';
import Task from './Task';
import { connect } from 'react-redux';

let TaskList = (props) => {
console.log('items', props.items);
var tasks = undefined;
if(props.items && props.items.length > 0 ){
  tasks = props.items.map( (item, key) => { return <Task data={item} 
  key={key} listItemKey={key} /> })
} //edited code

  return(
    <ul className="task-list">
      {tasks}
    </ul>
  );
}

const mapStateToProps = state => (
	{
		items: state.items
	}
);

export default connect(mapStateToProps)(TaskList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

至于商店使用以下命令在主文件中配置商店。 ...

import TaskReducer from './reducers/Task.js';
import * as redux from 'redux';
function configure(initialState = {}){
    const reducers = redux.combineReducers({
        tasks : TaskReducer 
    });

    let store = redux.createStore(reducers, initialState);

    return store;
};

const store = configure();
// Allows access to store in console log
window.store = store;

ReactDOM.render( (
  <Provider store={store}>
    <Container />
  </Provider>
  ),
  document.getElementById('wrapper')
);

如何在Redux中存储更改时重新呈现组件？

1 个答案: