javascript - 如何使用 React 让我的输入在段落中呈现?
问题描述
我正在处理一个待办事项列表,并且我已经为要添加的待办事项创建了功能。呈现待办事项的列表位于我创建 addTodo 函数的单独组件中。一切似乎都很好,但是,当我单击添加 todo 时,我添加的输入不会呈现在我在 Todo 组件中创建的段落中。我还安慰了我在输入中添加的数据,它显示在控制台中。我相信我的问题在于我如何在我的 Todo 组件的段落元素中设置我的道具。这是我的代码,如果有帮助的话。
import { useState, useEffect } from "react";
import classes from "./addlink.module.css";
import firebase from "firebase/app";
import initFirebase from "../../config";
import "firebase/firestore";
import Todo from "../Todo/Todo";
import { v4 as uuidv4 } from "uuid";
initFirebase();
const db = firebase.firestore();
function AddLink(props) {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState("");
useEffect(() => {
db.collection("links")
.orderBy("timestamp", "desc")
.onSnapshot((snapshot) => {
setTodos(
snapshot.docs.map((doc) => ({
id: doc.id,
todo: doc.data().todo,
}))
);
});
}, []);
const addTodo = (event) => {
event.preventDefault();
db.collection("links").add({
id: uuidv4(),
todo: input,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
console.log(input);
setInput("");
};
return (
<div className={classes.addlink}>
<form>
<div className={classes.adminlink}>
<input
type="text"
value={input}
onChange={(event) => setInput(event.target.value)}
/>
<button
className={classes.adminbutton}
type="submit"
onClick={addTodo}
>
Add new link
</button>
</div>
</form>
{todos.map((todo, id) => (
<Todo todo={todo} key={id} />
))}
</div>
);
}
export default AddLink;
还有 Todo.js
import React from "react";
import { AiOutlinePicture } from "react-icons/ai";
import { AiOutlineStar } from "react-icons/ai";
import { GoGraph } from "react-icons/go";
import DeleteForeverIcon from "@material-ui/icons/DeleteForever";
import classes from "./todo.module.css";
import firebase from "firebase/app";
import initFirebase from "../../config";
import "firebase/firestore";
initFirebase();
const db = firebase.firestore();
function Todo(props) {
const deleteHandler = (event) => {
db.collection("links").doc(props.todo.id).delete();
};
return (
<li className={classes.adminsection}>
<div className={classes.linkCards}>
<h3>Todo</h3>
<p>{props.value}</p>
<div>
<AiOutlinePicture />
<AiOutlineStar />
<GoGraph />
<DeleteForeverIcon onClick={deleteHandler} />
</div>
</div>
</li>
);
}
export default Todo;
解决方案
据我所知,您的todo
对象具有id
、todo
和timestamp
属性。
const addTodo = (event) => {
event.preventDefault();
db.collection("links").add({
id: uuidv4(),
todo: input,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
setInput("");
};
当links
集合更新时,您将其全部映射到todo
状态中的属性。
useEffect(() => {
db.collection("links")
.orderBy("timestamp", "desc")
.onSnapshot((snapshot) => {
setTodos(
snapshot.docs.map((doc) => ({
id: doc.id,
todo: doc.data().todo,
}))
);
});
}, []);
您映射它并将整个 todo
属性作为道具传递。
{todos.map((todo, id) => (
<Todo todo={todo} key={id} />
))}
最后在Todo
你访问一个value
道具。
<p>{props.value}</p>
这不是一个定义的值。
看来您应该访问一个props.todo.todo
道具。
<p>{props.todo.todo}</p>
我可能在嵌套级别和onSnapshot
订阅解包的内容上弄错了,所以它可能只是props.todo
.
<p>{props.todo}</p>
但是鉴于deleteHandler
您似乎正确地引用了props.todo.id
我确定您需要props.todo.todo
在该段落中访问。
警告词
映射数组时,如果你正在改变数组(在中间插入、删除元素等),那么不要使用数组索引作为 React 键,因为一旦你改变了数组,键就会转移到不同的元素。使用doc.id
因为这将是每个元素的内在价值。
{todos.map((todo) => (
<Todo todo={todo} key={todo.id} />
))}
查看列表和键
推荐阅读
- c# - Linq 查询实体框架核心中的错误转换参数
- javascript - 在javascript onclick(或任何)事件上调用异步函数
- python - 导出时间序列图
- php - 仅对经过身份验证的用户使用 Vimeo?
- visual-studio - 捏合和缩放 UWP 默认位置和大小
- azure - 相当于 Azure 特权身份管理 (PIM) 的 Google Cloud
- angular - 如何将服务注入另一个服务并在 Angular 中导出的常量或接口中使用它?
- laravel - 我如何反向使用 eloquent 模型检索数据
- r - 如何在 R 中创建多个 coropra
- excel - 通过excel中的宏从URL下载和重命名文件