Javascript React.js ToDo应用程序中的编辑功能有什么问题？_Javascript

Javascript React.js ToDo应用程序中的编辑功能有什么问题？

javascript

Javascript React.js ToDo应用程序中的编辑功能有什么问题？,javascript,Javascript,我正在使用React.js开发实习ToDo应用程序，并一直使用notes编辑功能。逻辑基本上完成了，但我坚持用“TypeError:arr[I]未定义”保存编辑过的注释。我将在GitHub上发布整个项目的链接，代码很简单，主要逻辑在ToDo.js和ToDoItem.js文件中。通常，我在将参数从“save”函数发送到“editItem”函数时遇到问题。请帮帮我，我只是个新手。。。 ToDoItem.js import React, {Component} from 'react'; im

我正在使用React.js开发实习ToDo应用程序，并一直使用notes编辑功能。逻辑基本上完成了，但我坚持用“TypeError:arr[I]未定义”保存编辑过的注释。我将在GitHub上发布整个项目的链接，代码很简单，主要逻辑在ToDo.js和ToDoItem.js文件中。通常，我在将参数从“save”函数发送到“editItem”函数时遇到问题。请帮帮我，我只是个新手。。。 ToDoItem.js

import React, {Component} from 'react';
import './ToDoItem.css';

class ToDoItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: false,
        }
      };

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

      save = () => {
        let updTitle = this.refs.newTitle.value;
        let updToDo = this.refs.newToDo.value;
        this.props.editItem (updTitle, updToDo, this.props.key);

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

      renderNormal = () => {
        return (
            <div className="ToDoItem">
            <p className="ToDoItem-Text">{this.props.title}</p>
            <p className="ToDoItem-Text">{this.props.todo}</p>
            <button className="ToDoItem-Edit" onClick={this.edit}>&#x270D;</button>
            <button className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</button>
        </div>
        );
      };

      renderEdit = () => {
        return (
          <div className="ToDoItem">
            <textarea ref="newTitle" defaultValue={this.props.title}></textarea>
            <textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
            <button onClick={this.save} className="ToDoItem-Save">&#128190;</button>
          </div>
        );
      };

      render() {
        if (this.state.editMode) {
          return this.renderEdit ();
        } else {
          return this.renderNormal ();
        }
      }
}

export default ToDoItem;

import React, {Component} from 'react';
import './ToDo.css';
import ToDoItem from './components/ToDoItem';
import Logo from './assets/logo.png';

class ToDo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {
                    title: 'Cup cleaning',
                    todo: "Wash and take away the Kurzhiy's cup from WC"
                },
                {
                    title: 'Smoking rollton',
                    todo: 'Do some rollton and cigarettes'
                },
                {
                    title: 'Curious dream',
                    todo: 'Build a time machine'
                }
            ],
            title: '',
            todo: ''
        };
    };

    createNewToDoItem = () => {
      this.setState(({ list, title, todo }) => ({
        list: [
            ...list,
          {
            title,  
            todo
          }
        ],
        title: '',
        todo: ''
      }));
    };

    handleKeyPress = e => {
        if (e.target.value !== '') {
          if (e.key === 'Enter') {
            this.createNewToDoItem();
          }

        }
    };

    handleTitleInput = e => {
      this.setState({
        title: e.target.value,
      });
    };

    handleTodoInput = e => {
        this.setState({
         todo: e.target.value
      });
    };

    deleteItem = indexToDelete => {
        this.setState(({ list }) => ({
          list: list.filter((toDo, index) => index !== indexToDelete)
      }));
    };

    editItem = (updTitle, updToDo, i) => {
        let arr = this.state.list;
        arr[i].title = updTitle;
        arr[i].todo = updToDo;
        this.setState ({list: arr});
    };

    eachToDo = (item, i) => {
        return <ToDoItem
                    key={i}
                    title={item.title}
                    todo={item.todo}
                    deleteItem={this.deleteItem.bind(this, i)}
                    editItem={this.editItem.bind(this, i)}
                />
      };

    render() {
        return (
            <div className="ToDo">
                <img className="Logo" src={Logo} alt="React logo"/>
                <h1 className="ToDo-Header">MAGISOFT REACT INTERNSHIP TODO</h1>
                <div className="ToDo-Container">

                    <div className="ToDo-Content">
                        {this.state.list.map(this.eachToDo)}
                    </div>

                    <div>
                       <input type="text" placeholder="Enter new title" value={this.state.title} onChange={this.handleTitleInput} onKeyPress={this.handleKeyPress}/>
                       <input type="text" placeholder="Enter new todo" value={this.state.todo} onChange={this.handleTodoInput} onKeyPress={this.handleKeyPress}/>
                       <button className="ToDo-Add" onClick={this.createNewToDoItem}>+</button>
                    </div>

                </div>
            </div>
        );
    }
}

export default ToDo;

import React，{Component}来自'React'；
导入“/ToDoItem.css”；
类ToDoItem扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
编辑模式：false，
}
};
编辑=（）=>{
this.setState（{editMode:true}）；
};
保存=（）=>{
设updTitle=this.refs.newTitle.value；
设updToDo=this.refs.newToDo.value；
this.props.editItem（updTitle、updToDo、this.props.key）；
这是我的国家({
editMode:false}）
};
renderNormal=（）=>{
返回(
{this.props.title}
{this.props.todo}
✍；
-
);
};
renderdit=（）=>{
返回(
💾
);
};
render（）{
if（this.state.editMode）{
返回this.renderdit（）；
}否则{
返回this.renderNormal（）；
}
}
}
将默认值导出到doitem；

ToDo.js

import React, {Component} from 'react';
import './ToDoItem.css';

class ToDoItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: false,
        }
      };

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

      save = () => {
        let updTitle = this.refs.newTitle.value;
        let updToDo = this.refs.newToDo.value;
        this.props.editItem (updTitle, updToDo, this.props.key);

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

      renderNormal = () => {
        return (
            <div className="ToDoItem">
            <p className="ToDoItem-Text">{this.props.title}</p>
            <p className="ToDoItem-Text">{this.props.todo}</p>
            <button className="ToDoItem-Edit" onClick={this.edit}>&#x270D;</button>
            <button className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</button>
        </div>
        );
      };

      renderEdit = () => {
        return (
          <div className="ToDoItem">
            <textarea ref="newTitle" defaultValue={this.props.title}></textarea>
            <textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
            <button onClick={this.save} className="ToDoItem-Save">&#128190;</button>
          </div>
        );
      };

      render() {
        if (this.state.editMode) {
          return this.renderEdit ();
        } else {
          return this.renderNormal ();
        }
      }
}

export default ToDoItem;

import React, {Component} from 'react';
import './ToDo.css';
import ToDoItem from './components/ToDoItem';
import Logo from './assets/logo.png';

class ToDo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                {
                    title: 'Cup cleaning',
                    todo: "Wash and take away the Kurzhiy's cup from WC"
                },
                {
                    title: 'Smoking rollton',
                    todo: 'Do some rollton and cigarettes'
                },
                {
                    title: 'Curious dream',
                    todo: 'Build a time machine'
                }
            ],
            title: '',
            todo: ''
        };
    };

    createNewToDoItem = () => {
      this.setState(({ list, title, todo }) => ({
        list: [
            ...list,
          {
            title,  
            todo
          }
        ],
        title: '',
        todo: ''
      }));
    };

    handleKeyPress = e => {
        if (e.target.value !== '') {
          if (e.key === 'Enter') {
            this.createNewToDoItem();
          }

        }
    };

    handleTitleInput = e => {
      this.setState({
        title: e.target.value,
      });
    };

    handleTodoInput = e => {
        this.setState({
         todo: e.target.value
      });
    };

    deleteItem = indexToDelete => {
        this.setState(({ list }) => ({
          list: list.filter((toDo, index) => index !== indexToDelete)
      }));
    };

    editItem = (updTitle, updToDo, i) => {
        let arr = this.state.list;
        arr[i].title = updTitle;
        arr[i].todo = updToDo;
        this.setState ({list: arr});
    };

    eachToDo = (item, i) => {
        return <ToDoItem
                    key={i}
                    title={item.title}
                    todo={item.todo}
                    deleteItem={this.deleteItem.bind(this, i)}
                    editItem={this.editItem.bind(this, i)}
                />
      };

    render() {
        return (
            <div className="ToDo">
                <img className="Logo" src={Logo} alt="React logo"/>
                <h1 className="ToDo-Header">MAGISOFT REACT INTERNSHIP TODO</h1>
                <div className="ToDo-Container">

                    <div className="ToDo-Content">
                        {this.state.list.map(this.eachToDo)}
                    </div>

                    <div>
                       <input type="text" placeholder="Enter new title" value={this.state.title} onChange={this.handleTitleInput} onKeyPress={this.handleKeyPress}/>
                       <input type="text" placeholder="Enter new todo" value={this.state.todo} onChange={this.handleTodoInput} onKeyPress={this.handleKeyPress}/>
                       <button className="ToDo-Add" onClick={this.createNewToDoItem}>+</button>
                    </div>

                </div>
            </div>
        );
    }
}

export default ToDo;

import React，{Component}来自'React'；
导入“/ToDo.css”；
从“./components/ToDoItem”导入ToDoItem；
从“./assets/Logo.png”导入徽标；
类ToDo扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名单：[
{
标题：“清洁杯子”，
todo:“清洗并从厕所中取出Kurzhiy杯”
},
{
标题：“吸烟的罗顿”，
todo:“做一些罗顿和香烟”
},
{
标题:"好奇的梦",，
todo:“构建时间机器”
}
],
标题：“”，
待办事项：“”
};
};
createNewToDoItem=（）=>{
this.setState（（{list，title，todo}）=>({
名单：[
列表
{
标题
待办事项
}
],
标题：“”，
待办事项：“”
}));
};
handleKeyPress=e=>{
如果（如目标值！=''）{
如果（e.key=='Enter'）{
this.createNewToDoItem（）；
}
}
};
handleTitleInput=e=>{
这是我的国家({
标题：e.target.value，
});
};
handleTodoInput=e=>{
这是我的国家({
todo:e.target.value
});
};
deleteItem=indexToDelete=>{
this.setState（（{list}）=>({
list:list.filter（（toDo，索引）=>index！==indexToDelete）
}));
};
editItem=（updTitle，updToDo，i）=>{
设arr=this.state.list；
arr[i].title=updTitle；
arr[i].todo=updToDo；
this.setState（{list:arr}）；
};
每个项目=（项目，i）=>{
返回
};
render（）{
返回(
magisofttodo
{this.state.list.map（this.eachToDo）}
+
);
}
}
导出默认ToDo；

将您的编辑项更新为以下内容，它将起作用。实际上您正在使用这个.editItem.bind（this，i）。由于索引是作为第一个参数传递的

editItem = (i, updTitle, updToDo) => {
    let arr = this.state.list;
    arr[i].title = updTitle;
    arr[i].todo = updToDo;
    this.setState ({list: arr});
};

请在问题中包含您的所有代码和必要信息请编辑您的问题以包含相关代码。好的，完成了）如果您不想更改函数定义，请更新此行。editItem={（updTitle，updToDo）=>this.editItem.bind（this，updTitle，updToDo，i）}Shubham，比你好多了，现在看起来我可以避免从“save”函数中发送this.props.key参数，我认为这个函数根本不起作用。我真的应该学习更多关于bind函数的知识，它从一开始就在代码中，我没有太注意她。。。