Блог

Недавно я начал изучать React и создавать API с помощью Django REST. Я просто попытался извлечь некоторые данные из API, работающего на 127.0.0.1: 8000, для отображения в приложении react to-do, работающем на 1270.0.1: 3000. Отображение данных работает хорошо. Но я хочу изменить состояние флажка, который я использовал для определения того, завершена задача todo или нет. Для этого у меня есть функция, которая вызывается всякий раз, когда мы хотим изменить состояние. Это работает идеально, когда данные извлекаются статически, но плохо работает с использованием API. Взгляните на приведенный ниже код :

App.js

 import React from 'react'
import Todo from './Components/Todo'
import ToDoData from './Components/ToDoData';
import Nav from './Components/Nav'
import { Switch, Route, Link } from 'react-router-dom';
import List from './Components/List'
// function based Component
function App() {
  //const Data = ToDoData.map(details => <Todo det={details} />)
  return (

    <div>
      <Switch>
        <Route path="/" component={List} exact />
      </Switch>
    </div>

  );
}
export default App
 

index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>, 
  document.getElementById('root')
);

serviceWorker.unregister();

 

List.js

 import React from 'react'
import Todo from './Todo'
import Nav from './Nav'

//Class based Component
class List extends React.Component {

    constructor() {
        super()
        this.state = {
            todos: [],
        }
        this.handleChange = this.handleChange.bind(this)
    }

    fetchData() {
        fetch('http://localhost:8000/Todo-api/')
            .then(response => response.json())
            .then((data) => {
                this.setState({
                    todos: data
                });
            });
    }

    componentDidMount() {
        this.fetchData();
    }

    handleChange(id) {
        console.log("Parth")
        this.setState(prevState => {
            const updatedData = prevState.todos.map(todo => {
                if (todo.id === id) {
                    todo.completed = !todo.completed
                }
                return todo
            })
            return {
                todos: updatedData
            }
        })
    }

    currentDate() {
        return new Date().getFullYear();
    }


    render() {
        const Data = this.state.todos.map(details => <Todo key={details.id} det={details} handleChange={this.handleChange} />)

        const someStyle = {
            marginTop: "40px", marginLeft: "100px", marginRight: "100px",
        }
        console.log(this.state.todos)
        return (
            <div>
                <Nav />

                <div className="todo-list box">
                    {Data}
                </div>

                <hr style={someStyle} />

                <p className="text-center" style={{ fontFamily: "Roboto Mono", lineHeight: 0.5 }}>Copyright ©️ {this.currentDate()} Parth Pandya </p>

                <p className="text-center" style={{ fontFamily: "Roboto Mono", fontSize: 10, lineHeight: 0.5 }}>Some rights reserved.</p>
            </div>
        )
    }
}

export default List
 

Todo.js

 import React from 'react'



function Todo(props) {
  const completeStyles = {
    fontStyle: "italic",
    textDecoration: "Line-through",
    color: "gray",
  }

  return (
    <div className="todo-item">
      <input type="checkbox" onChange={() => props.handleChange(props.det.id)} checked={props.det.completed} />
      <p style={props.det.completed ? completeStyles : null}>{props.det.title}</p>
    </div>
  );
}

export default Todo;
 

Может кто-нибудь, пожалуйста, предложить что-нибудь? Любая помощь будет полезна для завершения этого крошечного проекта и некоторых концепций 🙂 Только простая проблема с флажком!