Question

我正在尝试使用react添加列表中的项目。这是我的代码 https://plnkr.co/edit/JEG6o4JCBIQWAt2A4S3r?p=preview

我想在用户按下添加按钮时在列表中添加输入字段文本值。在我的演示中，我在点击时有一个add button我要在列表中添加项目。你能告诉我我做错了吗？

// Code goes here

const { createStore, bindActionCreators, applyMiddleware,combineReducers } = Redux;
const { Provider, connect } = ReactRedux;
const thunk = window.ReduxThunk.default;


const first_redux =function(state ='' ,action){
  switch (action.type){
    case 'ADD_ITEM':
     return action.payload
    default :
    return state

  }
}

const actions ={
 addItem :function(item){
  return {
    type :"ADD_ITEM",
    payload :item
  } 
 }  

}
var combindReducer = combineReducers({
  item:first_redux
})

const store = createStore(combindReducer);

class First extends React.Component {
  constructor (props){
    super(props);
    this.state = {
      names :[],
      username :''
    }
   this.changeEv =this.changeEv.bind(this);
   this.addName =this.addName.bind(this);
  }
  changeEv(e){
    this.setState({
      username : e.target.value
    })
  }
  addName(){
   // this.state.names.push(this.state.username);
    console.log(this.state);
    this.props.add(this.state.username)
  }

  render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    var listItems = this.state.names.map(function(d, idx){
      return (<li key={idx}>{d.name}</li>)
    })
    return (
      <div>
      <input type="text" onChange ={this.changeEv}/>
      <button onClick={this.addName}>add</button>
      {listItems}
      </div>
    );
  }
} 

function mapStateToProps(state){
  console.log('=================');
  console.log(state);
  return {
       names: state.item,

  };
    console.log(this.state);

}

function mapDispatchToProps(dispatch){
  return {
    add:bindActionCreators(actions.addItem,dispatch)
  }
}
const Appcontainer =connect(mapStateToProps,mapDispatchToProps)(First)

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

Answer 1

你在reducer中返回的内容基本上就是你的应用程序的状态，但是现在你只是返回你的有效负载，因此在这种情况下你的状态只是一个项目。你想要的是，你的状态是一个项目列表，因此你的状态应该创建一个数组，而不仅仅是返回有效负载。请注意，reducer中的状态应该是不可变的，因此我们不能简单地将新的有效负载推送到最后一个状态。

以下是如何实现此目的的示例：

const first_redux = function(state = [] ,action){
  switch (action.type){
    case 'ADD_ITEM':
      return [
        ...state,
        action.payload
      ];
    default :
      return state
  }
}

var combindReducer = combineReducers({
  items: first_redux
})

function mapStateToProps(state){
  console.log('=================');
  console.log(state);
  return {
    names: state.items,
  };
}

Answer 2

我对你的代码进行了一些更改，在这种情况下，当你使用redux时，商店在组件之外，mapDispatchToProps正在用组件的props映射全局状态。

//代码在这里

const { createStore, bindActionCreators, applyMiddleware,combineReducers } = Redux;
const { Provider, connect } = ReactRedux;
const thunk = window.ReduxThunk.default;

const initialState = []

const first_redux =function(state = initialState ,action){
  switch (action.type){
    case 'ADD_ITEM':
     let newState = action.payload;
     return [...state,newState];
    default :
    return state

  }
}

const actions ={
 addItem :function(item){
  return {
    type :"ADD_ITEM",
    payload :item
  } 
 }  

}
var combindReducer = combineReducers({
  item:first_redux
})

const store = createStore(combindReducer);

class First extends React.Component {
  constructor (props){
    super(props);
    this.state = {
      username :''
    }
   this.changeEv =this.changeEv.bind(this);
   this.addName =this.addName.bind(this);
  }
  changeEv(e){
    this.setState({
      username : e.target.value
    })
  }
  addName(){
   // this.state.names.push(this.state.username);
    console.log(this.state);
    this.props.add(this.state.username)
  }

  render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    var listItems = this.props.names.map(function(d, idx){
      return (<li key={idx}>{d}</li>)
    })
    return (
      <div>
      <input type="text" onChange ={this.changeEv}/>
      <button onClick={this.addName}>add</button>
      {listItems}
      </div>
    );
  }
} 

function mapStateToProps(state){
  console.log('=================');
  console.log(state);
  return {
       names: state.item,

  };
    console.log(this.state);

}

function mapDispatchToProps(dispatch){
  return {
    add:bindActionCreators(actions.addItem,dispatch)
  }
}
const Appcontainer =connect(mapStateToProps,mapDispatchToProps)(First)

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

https://plnkr.co/edit/e6oJXempwk0e5GciOSSB?p=previewp

如何使用react添加列表中的项目？

2 个答案: