javascript - 在 ReactJs 中没有显示变化反射的状态
问题描述
我最近开始学习 React 并使用 Django REST 制作 API。我只是尝试从运行在 127.0.0.1:8000 的 API 中提取一些数据,以显示在运行在 1270.0.1:3000 的 react to-do 应用程序上。数据显示效果很好。但是,我想要的是更改我用来定义待办事项完成与否的复选框的状态。为此,我有一个函数,每当我们想要更改状态时都会调用它。当静态获取数据但使用 API 不能很好地工作时,这件事很完美。看看下面的代码:
应用程序.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;
任何人都可以提出一些建议吗?任何帮助都将有助于完成这个小项目和一些概念:)只有一个简单的复选框问题!
解决方案
推荐阅读
- jquery - 如何使用 .each 使用保存在 var 中的 html 代码并使用 jQuery 在标签上过滤它
- javascript - 使用“”名称访问 Json 元素(子查询 mysql nodejs)
- php - 如何解决奇怪的 PHP 解析错误?
- reactjs - ReactJS 从循环中获取父级病毒
- php - 如何仅针对某个控制器操作禁用对 Redis 的实体缓存?
- dart - 滚动带有 ScrollController 的 CustomScrollView 时,SliverAppbar 仍然可见
- javascript - 保存为 csv 文件时的样式 html 表
- c# - 按值获取常量名称
- sql - 连接表以获取丢失的记录
- javascript - 在滚动工作选项卡中添加内容