使用 React 创建一个简单的待办事项 Js.Dont 知道为什么我的状态没有更新新的待办事项

Question

我基本上是在制作一个待办事项列表 app.I 只是希望用户输入文本并将其添加到我的 state.But 当我单击按钮时状态不会更新为新的 todoItem.please帮助解决这个问题。

我的状态是Context.js

import React from 'react';
const Context=React.createContext();

const reducer=(state,action)=>{
    switch(action.type){
        case "ADD_TODO":
            return {
                   
                ...state,
                todos:[action.payload,...state.todos]
            
            }
        default:
            return state;

    }
}


export class Provider extends React.Component{
    state={
        todos:[
            {id:"1",todoItem:"Code daily"},
            {id:"2",todoItem:"play"},
            {id: '16a1c935-a033-4272-85b4-4412de42b59f', todoItem: 'wdwdwd'},
           
        ],
        dispatch:action=>{
            this.setState(state=>{
                reducer(state,action)
            })
        }
    }



    render(){
        return(
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        )
    }
}


export const Consumer=Context.Consumer;

我的输入组件用于获取用户输入的 todoitem 并将其添加到 state.But 我的页面正在重新加载，但我的用户输入的文本未添加到 state.And 没有错误显示。

InputTodo.js

import React, { Component } from 'react';
import '../css/InputTodo.css';
import { v4 as uuidv4 } from 'uuid';
import {Consumer} from '../context';


class InputTodo extends Component {
    constructor(props){
        super(props);
        this.state={
            inputValue:""
        };
    }

    

    OnChange(event){
      const txtEntered=event.target.value;
      
       this.setState({
           inputValue:txtEntered,
       });
    }



    handleButtonClicked=(dispatch,event)=> {
        event.preventDefault();
        const inputValue=this.state.inputValue;

        const newTodo={
            id:uuidv4(),
            todoItem:inputValue, 
        }

        dispatch({type:'ADD_TODO',payload:newTodo});
 
      this.setState({
          inputValue:"",
      });


      this.props.history.push('/'); 
    }

    render() {
        return(
            <Consumer>
                {value=>{
                  const {dispatch}=value;
                    return (
                    <form onSubmit={this.handleButtonClicked.bind(this,dispatch)}>
                    <div className="form-group">
                        <input  value={this.state.inputValue} onChange={this.OnChange.bind(this)}  className="form-control" placeholder="Enter the todo" />
                        <button type="submit"  className="btn btn-primary">Add</button>
                    </div>
            </form>
           
                    )}}
            </Consumer>
        )
    }
}


export default InputTodo;

Answer 1

您刚刚忘记 return 调度中的新状态 setState:

export class Provider extends React.Component{
    state={
        /* ... */
        dispatch:action=>{
            this.setState(state=>{
                return reducer(state,action) /* <--- Here you missed the return */
            })
        }
    }
   /* ... */

使用 React 创建一个简单的待办事项 Js.Dont 知道为什么我的状态没有更新新的待办事项

Creating a simple todolist using React Js.Dont know why my state is not getting updated with new todo Item

reactjs

action

dispatch

react-context