面试题：React中Map生成列表结合状态管理的场景应用

Question

假设你正在开发一个待办事项列表应用，使用React和Redux（也可使用其他状态管理库）。列表数据存储在Redux的store中，用Map方法渲染待办事项列表。要求：1. 展示如何从store中获取数据并使用Map渲染列表；2. 当用户勾选一个待办事项表示完成时，如何通过状态管理更新列表，同时保证Map渲染的列表能正确反映变化。

Answer 1

1. 从store中获取数据并使用Map渲染列表

1. 安装依赖： 确保项目中安装了react、react - dom、redux和react - redux。

npm install react react - dom redux react - redux

2. 设置Redux store： 创建reducer来管理待办事项列表数据。假设待办事项数据结构为{ id: number, text: string, completed: boolean }。

// reducer.js
const initialState = [];

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        // 可添加其他action处理逻辑
        default:
            return state;
    }
};

export default todoReducer;

创建store。

// store.js
import { createStore } from'redux';
import todoReducer from './reducer';

const store = createStore(todoReducer);

export default store;

3. 在React组件中使用数据： 使用react - redux的connect（或useSelector和useDispatch钩子，这里以connect为例）从store获取数据并渲染列表。

// TodoList.js
import React from'react';
import { connect } from'react - redux';

const TodoList = ({ todos }) => {
    return (
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>{todo.text}</li>
            ))}
        </ul>
    );
};

const mapStateToProps = state => ({
    todos: state
});

export default connect(mapStateToProps)(TodoList);

4. 在应用中使用TodoList组件：

// App.js
import React from'react';
import ReactDOM from'react - dom';
import TodoList from './TodoList';
import { Provider } from'react - redux';
import store from './store';

const App = () => {
    return (
        <Provider store={store}>
            <TodoList />
        </Provider>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

2. 更新列表并保证Map渲染的列表能正确反映变化

1. 添加action和reducer逻辑： 在reducer中添加处理勾选待办事项的逻辑。

// reducer.js
const initialState = [];

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'TOGGLE_TODO':
            return state.map(todo =>
                todo.id === action.payload.id
                   ? {...todo, completed:!todo.completed }
                    : todo
            );
        default:
            return state;
    }
};

export default todoReducer;

在action文件中定义toggleTodo action。

// actions.js
const toggleTodo = id => ({
    type: 'TOGGLE_TODO',
    payload: { id }
});

export { toggleTodo };

2. 在组件中触发action： 使用connect（或useDispatch钩子）在组件中触发toggleTodo action。

// TodoList.js
import React from'react';
import { connect } from'react - redux';
import { toggleTodo } from './actions';

const TodoList = ({ todos, toggleTodo }) => {
    return (
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>
                    <input
                        type="checkbox"
                        checked={todo.completed}
                        onChange={() => toggleTodo(todo.id)}
                    />
                    {todo.text}
                </li>
            ))}
        </ul>
    );
};

const mapStateToProps = state => ({
    todos: state
});

const mapDispatchToProps = dispatch => ({
    toggleTodo: id => dispatch(toggleTodo(id))
});

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

如果使用其他状态管理库，如MobX：

1. 安装MobX和mobx - react：

npm install mobx mobx - react

2. 创建MobX store：

// store.js
import { makeObservable, observable, action } from'mobx';

class TodoStore {
    todos = [];

    constructor() {
        makeObservable(this, {
            todos: observable,
            toggleTodo: action
        });
    }

    toggleTodo(id) {
        this.todos = this.todos.map(todo =>
            todo.id === id
               ? {...todo, completed:!todo.completed }
                : todo
        );
    }
}

const todoStore = new TodoStore();
export default todoStore;

3. 在React组件中使用MobX store：

// TodoList.js
import React from'react';
import { observer } from'mobx - react';
import todoStore from './store';

const TodoList = observer(() => {
    return (
        <ul>
            {todoStore.todos.map(todo => (
                <li key={todo.id}>
                    <input
                        type="checkbox"
                        checked={todo.completed}
                        onChange={() => todoStore.toggleTodo(todo.id)}
                    />
                    {todo.text}
                </li>
            ))}
        </ul>
    );
});

export default TodoList;

4. 在应用中使用TodoList组件：

// App.js
import React from'react';
import ReactDOM from'react - dom';
import TodoList from './TodoList';

const App = () => {
    return <TodoList />;
};

ReactDOM.render(<App />, document.getElementById('root'));