待办事项应用中的多个待办事项从JSON占位符获取相同的ID

Question

我正在尝试制作一个reactJs todo应用程序，并使用json占位符对其进行测试。我正在使用axios方法将待办事项发布到应用程序。

向应用程序添加一个新的待办事项，其ID为201，同时添加多个待办事项，其ID为201。

如何确保从中获得唯一的ID？

这里有App.js代码：

class App extends Component {

  state = {
    todos :[
      
    ]
  }

  componentDidMount(){
    axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10').then(
      res => this.setState({todos: res.data}))
    }

  //Mark Complete
  markCompleted = (id) => {
    this.setState({todos: this.state.todos.map(todo => {
      if(todo.id === id){
        todo.completed = !todo.completed;
      }
      return todo;
    })})
  };

  //Delete Item
  deleteItem = (id) => {
    axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`).then(
        this.setState({todos: [...this.state.todos.filter(
      todo => todo.id !== id
        )]}));
  }


  //Add Todo
  addTodo = (title) => {
    axios.post('https://jsonplaceholder.typicode.com/todos', {
      title: title,
      completed: false
    }).then(res => this.setState({todos: [...this.state.todos, res.data]}))
    
  }

  //Render
  render() {
    return (
      <Router>
        <div className="App">
          <div className="container">
            <Header />
            <Route exact path="/" render={props => (
              <React.Fragment>
                <AddTodo addTodo={this.addTodo}/>
                <Todos todos={this.state.todos} markCompleted={this.markCompleted} deleteItem = {this.deleteItem}/>
              </React.Fragment>
            )}/>
            <Route path="/about" component={About}></Route>
          </div>
        
        </div>
      </Router>

我还要提到的是，在使用json占位符进行测试之前，我使用了uuid并以这种方式设置了id，这是可行的。尝试在addTodo中添加“ id：uuid.v4（）”，但无济于事。

这也是我的AddTodo.js代码：

import React, {Component} from 'react';
import PropTypes from 'prop-types'


export class AddTodo extends Component {

    state = {
        
        title: ''
    }

    //Component level state, not app level
    onChange = (e) => this.setState({
        [e.target.title]: e.target.value //tite: e.target.value
    });

    onSubmit = (e) => {
        e.preventDefault();
        this.props.addTodo(this.state.title);
        this.setState({title: ''});
    }

    render(){
        return (
            <form onSubmit={this.onSubmit} style={{display: 'flex'}}>
                <input 
                    type='text' 
                    title='title' 
                    placeholder='Add Todo' 
                    style={{flex: '10', padding: '5px'}}
                    value={this.state.title}
                    onChange={this.onChange}
                />
                <input 
                    type="submit" 
                    value="Submit" 
                    className="btn" 
                    style={{flex: '1'}}
                />
        
            </form>

            
          )
    }
}

//PropTypes
AddTodo.propTypes = {
    addTodo: PropTypes.func.isRequired
  }

export default AddTodo;