如何使用 React 在我正在渲染的 UI 中渲染从两个不同输入接收到的数据?
How can I render data, which I receive from two different inputs, in the UI that I am rendering, using React?
我正在使用 React 和 Firebase 创建待办事项列表。目前,我可以添加待办事项,并将其呈现在 UI 中,这是我导入和映射的列表。问题是,当我尝试添加一个额外的输入时,我无法渲染第二个输入,只有第一个输入被渲染。考虑到这一点,我决定 console.log 这两个输入,我看到数据在控制台中可用。然后我之前在 Whosebug 上创建了一个问题,认为我的问题是我在 child 组件中期望的道具。但是现在,我认为我的问题在于我的数据是如何传递、映射和呈现的。例如,我的待办事项作为参数传递,但是当我映射列表元素时,我还需要将我的标题作为参数传递。所以我的问题更多是关于如何让这两条数据在我的 UI.
中呈现
这是 parent 组件。 AddLink.js.
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 [inputLinks, setInputLinks] = useState("");
const [inputHeaders, setInputHeaders] = 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: inputLinks,
title: inputHeaders,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
console.log(inputLinks);
console.log(inputHeaders);
setInputLinks("");
setInputHeaders("");
};
return (
<div className={classes.addlink}>
<form>
<div className={classes.adminlink}>
<input
type="text"
value={inputLinks}
onChange={(event) => setInputLinks(event.target.value)}
/>
<input
type="text"
value={inputHeaders}
onChange={(event) => setInputHeaders(event.target.value)}
/>
<button
className={classes.adminbutton}
type="submit"
onClick={addTodo}
>
Add new link
</button>
</div>
</form>
{todos.map((todo, title) => (
<Todo id={todo.id} todo={todo} title={todo.title} key={todo.id} />
))}
</div>
);
}
export default AddLink;
和 child 组件 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>{props.todo.title}</h3>
<p>{props.todo.todo}</p>
<div>
<AiOutlinePicture />
<AiOutlineStar />
<GoGraph />
<DeleteForeverIcon onClick={deleteHandler} />
</div>
</div>
</li>
);
}
export default 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 [inputLinks, setInputLinks] = useState("");
const [inputHeaders, setInputHeaders] = useState("");
useEffect(() => {
db.collection("links")
.orderBy("timestamp", "desc")
.onSnapshot((snapshot) => {
setTodos(
snapshot.docs.map((doc) => ({
id: doc.id,
todo: doc.data(),
}))
);
});
}, []);
const addTodo = (event) => {
event.preventDefault();
db.collection("links").add({
id: uuidv4(),
todo: inputLinks,
title: inputHeaders,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
console.log(inputLinks);
console.log(inputHeaders);
setInputLinks("");
setInputHeaders("");
};
return (
<div className={classes.addlink}>
<form>
<div className={classes.adminlink}>
<input
type="text"
value={inputLinks}
onChange={(event) => setInputLinks(event.target.value)}
/>
<input
type="text"
value={inputHeaders}
onChange={(event) => setInputHeaders(event.target.value)}
/>
<button
className={classes.adminbutton}
type="submit"
onClick={addTodo}
>
Add new link
</button>
</div>
</form>
{todos.map((i) => (
<Todo id={i.id} todo={i.todo} title={i.todo.title} key={i.id} />
))}
</div>
);
}
export default AddLink;
错误:
- 此处
todo
仅获取部分数据:
snapshot.docs.map((doc) => ({
id: doc.id,
todo: doc.data().todo,
}))
- 这里需要考虑保存的是单个对象,需要将其作为一个对象读取
{todos.map((todo, title) => (
<Todo id={todo.id} todo={todo} title={todo.title} key={todo.id} />
))}
我正在使用 React 和 Firebase 创建待办事项列表。目前,我可以添加待办事项,并将其呈现在 UI 中,这是我导入和映射的列表。问题是,当我尝试添加一个额外的输入时,我无法渲染第二个输入,只有第一个输入被渲染。考虑到这一点,我决定 console.log 这两个输入,我看到数据在控制台中可用。然后我之前在 Whosebug 上创建了一个问题,认为我的问题是我在 child 组件中期望的道具。但是现在,我认为我的问题在于我的数据是如何传递、映射和呈现的。例如,我的待办事项作为参数传递,但是当我映射列表元素时,我还需要将我的标题作为参数传递。所以我的问题更多是关于如何让这两条数据在我的 UI.
中呈现这是 parent 组件。 AddLink.js.
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 [inputLinks, setInputLinks] = useState("");
const [inputHeaders, setInputHeaders] = 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: inputLinks,
title: inputHeaders,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
console.log(inputLinks);
console.log(inputHeaders);
setInputLinks("");
setInputHeaders("");
};
return (
<div className={classes.addlink}>
<form>
<div className={classes.adminlink}>
<input
type="text"
value={inputLinks}
onChange={(event) => setInputLinks(event.target.value)}
/>
<input
type="text"
value={inputHeaders}
onChange={(event) => setInputHeaders(event.target.value)}
/>
<button
className={classes.adminbutton}
type="submit"
onClick={addTodo}
>
Add new link
</button>
</div>
</form>
{todos.map((todo, title) => (
<Todo id={todo.id} todo={todo} title={todo.title} key={todo.id} />
))}
</div>
);
}
export default AddLink;
和 child 组件 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>{props.todo.title}</h3>
<p>{props.todo.todo}</p>
<div>
<AiOutlinePicture />
<AiOutlineStar />
<GoGraph />
<DeleteForeverIcon onClick={deleteHandler} />
</div>
</div>
</li>
);
}
export default 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 [inputLinks, setInputLinks] = useState("");
const [inputHeaders, setInputHeaders] = useState("");
useEffect(() => {
db.collection("links")
.orderBy("timestamp", "desc")
.onSnapshot((snapshot) => {
setTodos(
snapshot.docs.map((doc) => ({
id: doc.id,
todo: doc.data(),
}))
);
});
}, []);
const addTodo = (event) => {
event.preventDefault();
db.collection("links").add({
id: uuidv4(),
todo: inputLinks,
title: inputHeaders,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
console.log(inputLinks);
console.log(inputHeaders);
setInputLinks("");
setInputHeaders("");
};
return (
<div className={classes.addlink}>
<form>
<div className={classes.adminlink}>
<input
type="text"
value={inputLinks}
onChange={(event) => setInputLinks(event.target.value)}
/>
<input
type="text"
value={inputHeaders}
onChange={(event) => setInputHeaders(event.target.value)}
/>
<button
className={classes.adminbutton}
type="submit"
onClick={addTodo}
>
Add new link
</button>
</div>
</form>
{todos.map((i) => (
<Todo id={i.id} todo={i.todo} title={i.todo.title} key={i.id} />
))}
</div>
);
}
export default AddLink;
错误:
- 此处
todo
仅获取部分数据:
snapshot.docs.map((doc) => ({
id: doc.id,
todo: doc.data().todo,
}))
- 这里需要考虑保存的是单个对象,需要将其作为一个对象读取
{todos.map((todo, title) => (
<Todo id={todo.id} todo={todo} title={todo.title} key={todo.id} />
))}