当前位置：首页 > React

react如何添加数据

2026-01-24 22:54:05React

添加数据到 React 组件

在 React 中，可以通过多种方式添加数据，具体取决于数据的来源和用途。以下是几种常见的方法：

使用 State 管理数据

通过 useState Hook 可以在函数组件中添加和管理数据。这种方法适用于需要在组件内部动态更新的数据。

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  const addData = () => {
    const newItem = { id: Date.now(), value: 'New Item' };
    setData([...data, newItem]);
  };

  return (
    <div>
      <button onClick={addData}>Add Data</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

通过 Props 传递数据

如果数据来自父组件，可以通过 Props 将数据传递给子组件。

function ParentComponent() {
  const initialData = ['Item 1', 'Item 2', 'Item 3'];

  return <ChildComponent data={initialData} />;
}

function ChildComponent({ data }) {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

从 API 获取数据

使用 useEffect 和 fetch 或 axios 从外部 API 加载数据。

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

使用 Context 共享数据

对于需要在多个组件间共享的数据，可以使用 Context API。

import React, { createContext, useContext, useState } from 'react';

const DataContext = createContext();

function DataProvider({ children }) {
  const [data, setData] = useState([]);

  const addData = (newItem) => {
    setData([...data, newItem]);
  };

  return (
    <DataContext.Provider value={{ data, addData }}>
      {children}
    </DataContext.Provider>
  );
}

function ConsumerComponent() {
  const { data, addData } = useContext(DataContext);

  return (
    <div>
      <button onClick={() => addData({ id: Date.now(), value: 'New Item' })}>
        Add Data
      </button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

使用 Redux 管理全局状态

对于复杂的应用，可以使用 Redux 来管理全局数据状态。

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const initialState = {
  data: []
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_DATA':
      return { ...state, data: [...state.data, action.payload] };
    default:
      return state;
  }
}

const store = createStore(reducer);

function ReduxComponent() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  const addData = () => {
    dispatch({ type: 'ADD_DATA', payload: { id: Date.now(), value: 'New Item' } });
  };

  return (
    <div>
      <button onClick={addData}>Add Data</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <ReduxComponent />
    </Provider>
  );
}