react如何添加数据
在 React 中添加数据的方法
使用状态管理（useState）
通过 useState Hook 可以管理组件内部的状态数据。初始化状态后，调用状态更新函数添加新数据。
import React, { useState } from 'react';
function AddDataExample() {
const [data, setData] = useState([]);
const addNewData = () => {
const newItem = { id: Date.now(), name: "New Item" };
setData([...data, newItem]); // 合并旧数据和新数据
};
return (
<div>
<button onClick={addNewData}>Add Data</button>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}通过表单提交添加数据
结合表单输入和状态管理，动态获取用户输入并添加到数据列表中。
function FormAddData() {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (!inputValue.trim()) return;
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue(""); // 清空输入框
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">Add</button>
</form>
<ul>
{items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
</div>
);
}从 API 获取数据后添加
通过异步请求（如 fetch 或 axios）获取远程数据，合并到现有状态中。
async function fetchDataAndAdd() {
try {
const response = await fetch('https://api.example.com/data');
const newData = await response.json();
setData(prevData => [...prevData, ...newData]); // 合并原有数据和新数据
} catch (error) {
console.error("Fetch error:", error);
}
}使用 Context 或 Redux 全局添加数据
对于跨组件共享的数据，可通过 Context API 或 Redux 实现全局状态管理。
// Context API 示例
const DataContext = React.createContext();
function DataProvider({ children }) {
const [globalData, setGlobalData] = useState([]);
const addGlobalData = (newItem) => {
setGlobalData([...globalData, newItem]);
};
return (
<DataContext.Provider value={{ globalData, addGlobalData }}>
{children}
</DataContext.Provider>
);
}
// 在子组件中调用 addGlobalData 添加数据直接操作 DOM（不推荐）
在极少数需要直接操作 DOM 的场景下，可通过 ref 获取元素并修改内容，但应优先使用状态驱动的方式。
function DomManipulation() {
const listRef = useRef(null);
const addItem = () => {
const li = document.createElement('li');
li.textContent = "New Item";
listRef.current.appendChild(li);
};
return (
<div>
<button onClick={addItem}>Add Item</button>
<ul ref={listRef}></ul>
</div>
);
}
