Reactjs 如何在React.js中将项目添加到列表中？

我正在尝试向React.js中的列表添加一项。这是我的密码：

我想在用户单击add按钮时将输入字段的文本值添加到列表中。在我的演示中，我有

添加按钮

，单击后，我想将该项目添加到列表中。 你能告诉我哪里做错了吗

Code:

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'));

代码：
const{createStore，bindActionCreators，applyMiddleware，combineReducers}=Redux；
const{Provider，connect}=ReactRedux；
const thunk=window.reduxtunk.default；
const first_redux=函数（状态=''，操作）{
开关（动作类型）{
案例“添加项目”：
返回动作.有效载荷
违约：
返回状态
}
}
常量动作={
附加项：功能（项目）{
返回{
键入：“添加_项”，
有效载荷：项目
} 
}  
}
var组合减速机=组合减速机({
项目：第一次重复
})
const store=createStore（combindReducer）；
类首先扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
姓名：[]，
用户名：“”
}
this.changeEv=this.changeEv.bind（this）；
this.addName=this.addName.bind（this）；
}
changeEv（e）{
这是我的国家({
用户名：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（函数（d，idx）{
返回（
{d.name}
）
})
返回(
添加
{listItems}
);
}
} 
函数MapStateTops（状态）{
console.log（'======================'）；
console.log（状态）；
返回{
名称：state.item，
};
console.log（this.state）；
}
功能图DispatchToprops（调度）{
返回{
添加：bindActionCreators（actions.addItem，dispatch）
}
}
const Appcontainer=connect（mapStateToProps、mapDispatchToProps）（第一个）
ReactDOM.render(
，document.getElementById（'root'）；

在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,
  };
}

---

在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,
  };
}

---

我在您的代码中做了一些更改，在本例中，当您使用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'));

const{createStore，bindActionCreators，applyMiddleware，combinereducer}=Redux；
const{Provider，connect}=ReactRedux；
const thunk=window.reduxtunk.default；
常量initialState=[]
const first_redux=函数（状态=初始状态，动作）{
开关（动作类型）{
案例“添加项目”：
让newState=action.payload；
返回[…状态，newState]；
违约：
返回状态
}
}
常量动作={
附加项：功能（项目）{
返回{
键入：“添加_项”，
有效载荷：项目
} 
}  
}
var组合减速机=组合减速机({
项目：第一次重复
})
const store=createStore（combindReducer）；
类首先扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”
}
this.changeEv=this.changeEv.bind（this）；
this.addName=this.addName.bind（this）；
}
changeEv（e）{
这是我的国家({
用户名：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（函数（d，idx）{
返回（
{d}
）
})
返回(
添加
{listItems}
);
}
} 
函数MapStateTops（状态）{
console.log（'======================'）；
console.log（状态）；
返回{
名称：state.item，
};
console.log（this.state）；
}
功能图DispatchToprops（调度）{
返回{
添加：bindActionCreators（actions.addItem，dispatch）
}
}
const Appcontainer=connect（mapStateToProps、mapDispatchToProps）（第一个）
ReactDOM.render(
我在您的代码中做了一些更改，在本例中，当您使用redux时，存储在组件之外，mapDispatchToProps使用组件的道具映射全局状态

//代码在这里

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'));

const{createStore，bindActionCreators，applyMiddleware，combinereducer}=Redux；
const{Provider，connect}=ReactRedux；
const thunk=window.reduxtunk.default；
常量initialState=[]
const first_redux=函数（状态=初始状态，动作）{
开关（动作类型）{
案例“添加项目”：
让newState=action.payload；
返回[…状态，newState]；
违约：
返回状态
}
}
常量动作={
附加项：功能（项目）{
返回{
键入：“添加_项”，
有效载荷：项目
} 
}  
}
var组合减速机=组合减速机({
项目：第一次重复
})
const store=createStore（combindReducer）；
类首先扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”
}
this.changeEv=this.changeEv.bind（this）；
this.addName=this.addName.bind（this）；
}
changeEv（e）{
这是我的国家({
用户名：