如何使用Reactjs和Redux删除每一行

npx create-react-app my-app

cd my-app

npm install redux react-redux

import React from 'react';
import { connect } from 'react-redux';
import { deleteRow } from '../actions';

const TodoList = ({ rows, deleteRow }) => {
  return (
    <div>
      <ul>
        {rows.map((row, index) => (
          <li key={index}>
            {row}
            <button onClick={() => deleteRow(index)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    rows: state.rows,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    deleteRow: (index) => dispatch(deleteRow(index)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

export const deleteRow = (index) => {
  return {
    type: 'DELETE_ROW',
    payload: index,
  };
};

const initialState = {
  rows: ['行1', '行2', '行3'], // 初始行数据
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'DELETE_ROW':
      return {
        ...state,
        rows: state.rows.filter((row, index) => index !== action.payload),
      };
    default:
      return state;
  }
};

export default reducer;

import TodoList from './components/TodoList';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(reducer);

<Provider store={store}>
  <TodoList />
</Provider>

npm start