Redux - ES6 Обновление элемента объекта в массиве

Question

Я наткнулся на проблему при добавлении элемента внутри объекта внутри массива. Я хотел бы добавить элемент isFavorite: true. В настоящее время я пытаюсь сделать это следующим образом:

{ 
    ...state, 
    list: state.list.map(item => 
        item.id === action.payload.libraryContentId ? 
        { ...item, isFavorite: true } 
        : item) 
}

Полезная нагрузка содержит следующий объект:

{
    id: 1,
    name: 'Name',
    libraryContentId: 3
}

Но вышеприведенное, похоже, не обновляет элемент и не добавляет элемент. Что вы, ребята, предлагаете?

Редактировать : дополнительные примеры кода.

Действие:

try {
    const response = await axios.post(URL, {params});
    dispatch({ type: ADD_FAVORITE, payload: response.data });
catch (error) {
    dispatch({ type: ERROR });
}

Данные ответа:

{
    id: 117
    libraryConntentId: 245
}

Образец списка элементов:

{
    id: 245,
    name: 'Name',
    isFavorite: false
}

Спасибо!

Answer 1

Может быть, что-то вроде этого (проверьте testMethod):

class Hello extends React.Component {
	constructor(props){
  	super(props);
    
    
    let testData = [
    	{
      	id: 1,
        name: 'Name1',
        isFavorite: false
      },
      {
      	id: 2,
        name: 'Name2',
        isFavorite: false
      },
      {
      	id: 3,
        name: 'Name3',
        isFavorite: false
      },
      {
      	id: 4,
        name: 'Name4',
        isFavorite: false
      },
      {
      	id: 5,
        name: 'Name5',
        isFavorite: false
      }]
    
    this.state = {
    	boolvar: true,
        numbar: 2,
    	list: testData
    }
   	this.testMethod = this.testMethod.bind(this);
    console.log("Original state");
    console.log(this.state);
  }
  
  testMethod(){
  		 let testAction = {
		payload: {
    	libraryContentId: 3
     }
	}
  
   this.setState((prevState, prevProps) => {
      return {
       list: [...prevState.list.map(item => item.id === testAction.payload.libraryContentId? {...item, isFavorite: true}: item)]
       }});
   }
  render(){
  	console.log(this.state);
    return (<div><button onClick={() => {this.testMethod()}}>Test It</button></div>);
  }
  
   
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>