Question

我想通过单击切换项目的完成属性。问题是我不知道如何在减速器状态下执行此操作。该属性存储在数组的对象内，这使得在reducer中定位很困难。

App.js

import React,{ useReducer,useState } from 'react';
import logo from './logo.svg';
import './App.css';
import {reducer, initialState} from "./reducers/reducer"

function App() {
  const [item,setItem] = useState("")
  const [state,dispatch] = useReducer(reducer,initialState)
const handleCompleted = () => {
  dispatch({type:"TOGGLE_COMPLETED",payload:0})
  console.log(state[0])
}
const handleChanges = e => {
  setItem(e.target.value)
}
const addTodo = e => {
  dispatch({type:"ADD_TODO",newItem:{item:item,id:Date.now(),completed:false}})
  e.preventDefault()
  console.log(state)
}
  return (
    <form onSubmit={addTodo}>
      <button>submitTodo</button>
      <input onChange={handleChanges} value={item} />
      <div>
      <button onClick={handleCompleted}>completed</button>
      {state.list.map(i => <p key ={i.id}>{i.item}</p>)}
      </div>
    </form>
  );
}

export default App;

Reducer.js

export const initialState = {

        list :[{item: 'Learn about reducers',
        completed: false,
        id: 3892987589}]
}




export const reducer = (state,action) => {
    switch(action.type){
        case "TOGGLE_COMPLETED" : 
        return state.list[action.payload].completed = !state.list[action.payload].completed

        case "ADD_TODO" : 
        return {...state,list:[...state.list,action.newItem]}


        default:
            return state}

        }

Answer 1

您可以在App.js中如下修改功能

const handleCompleted = (id) => {
  dispatch({type:"TOGGLE_COMPLETED",payload:id})
}

在渲染功能中将<button onClick={handleCompleted}>completed</button>更改为

{state.list.map(i => <p key ={i.id}>{i.item}<button onClick={this.handleCompleted.bind(this, i,id)}>completed</button></p>)}<button onClick={this.handleCompleted.bind(this, id)}>completed</button>

在Reducers.js中

注意：通常，您将创建与项目对应的ID映射，以方便更新。但这也暂时适用。

export const reducer = (state,action) => {
    switch(action.type){
        case "TOGGLE_COMPLETED" : 
        const modifiedState = state.map(item=> {
          if(item.id === action.payload.id){
            return {
              ...item,
              completed: true
            }
          }
          return item
        });
        return modifiedState

        case "ADD_TODO" : 
        return {...state,list:[...state.list,action.newItem]}


        default:
            return state}

        }

Answer 2

您可以使用findIndex。在您的情况下，请使用id在数组中查找索引，然后更改completed的状态

const initialState = {

  list: [{
    item: 'Learn about reducers',
    completed: false,
    id: 3892987589
  }]
}



function changeStatus(id) {
  let getIndex = initialState.list.findIndex(e => e.id === id);
  initialState.list[getIndex].completed = true;
}

changeStatus(3892987589);
console.log(initialState.list)

如何在化简器中访问数组对象中的特定项目

2 个答案: