React - 設置狀態

Question

我正在關注Samer Buna的Lynda課程「完全堆棧JavaScript開發：MongoDB，Node和React」，並且想知道「命名比賽」應用程序的App組件中的一段代碼。我的問題是關於前端React App組件，特別是設置狀態。我無法搞清楚碼塊是：

contests: { 
      ...this.state.contests, 
      [contest.id]: contest 
     } 

在App組分fetchContest（）函數內部 - App.js：

import React from 'react'; 
import Header from './Header'; 
import ContestList from './ContestList'; 
import Contest from './Contest'; 
import * as api from '../api'; 

const pushState =(obj, url) => 
    window.history.pushState(obj, '', url); 

class App extends React.Component { 
    static propTypes = { 
    initialData: React.PropTypes.object.isRequired 
    }; 
    state = this.props.initialData; 
    componentDidMount() {} 
    componentWillUnmount() {} 
    fetchContest = (contestId) => { 
    pushState(
     { currentContestId: contestId }, 
     `/contest/${contestId}` 
    ); 
    api.fetchContest(contestId).then(contest => { 
     this.setState({ 
     currentContestId: contest.id, 
     contests: { 
      ...this.state.contests, 
      [contest.id]: contest 
     } 
     }); 
    }); 
    // lookup the contest 
    // convert contests from array to object, for constant time lookup 
    // this.state.contests[contestId] 
    } 
    pageHeader() { 
    if (this.state.currentContestId) { 
     return this.currentContest().contestName; 
    } 

    return 'Naming Contests'; 
    } 
    currentContest() { 
    return this.state.contests[this.state.currentContestId]; 
    } 
    currentContent() { 
    if (this.state.currentContestId) { 
     return <Contest {...this.currentContest()} />; 
    } 

    return <ContestList 
     onContestClick={this.fetchContest} 
     contests={this.state.contests} />; 
    } 
    render() { 
    return (
    <div className="App"> 
     <Header message={this.pageHeader()} /> 
     {this.currentContent()} 
    </div> 
    ); 
    } 
} 

export default App; 

api.js是內部的唯一的文件'API' 目錄中，並且它包括一個Axios公司呼叫以檢索對應於每個競賽JSON對象：

api.js：

import axios from 'axios'; 

export const fetchContest = (contestId) => { 
    return axios.get(`/api/contests/${contestId}`) 
       .then(resp => resp.data); 
}; 

參考，爭奇鬥豔的JSON內容是這樣的：

{ 
    "contests": [ 
    { 
     "id": 1, 
     "categoryName": "Business/Company", 
     "contestName": "Cognitive Building Bricks" 
    }, 
    { 
     "id": 2, 
     "categoryName": "Magazine/Newsletter", 
     "contestName": "Educating people about sustainable food production" 
    }, 
    { 
     "id": 3, 
     "categoryName": "Software Component", 
     "contestName": "Big Data Analytics for Cash Circulation" 
    }, 
    { 
     "id": 4, 
     "categoryName": "Website", 
     "contestName": "Free programming books" 
    } 
    ] 
} 

我以前見過的傳播經營者，但我不確定它是如何在這種情況下究竟使用。此外，'[contest.id]：比賽'也令我困惑。如果有人可以提供一些澄清，將非常感謝！

Answer 1

因此，spread操作符會將一個對象的所有鍵和值複製到另一個對象中。在Redux reducer的情況下，這通常用於克隆狀態並使存儲不可變。

[contest.id]: contest正在計算一個關鍵。見Computed property keys。

例如，給定contest.id是34和state.constests包含大賽32和33，你會與對象恰似結束：

{ 
    '32': {}, // This is the same value as it was in the initial store 
    '33': {}, // ... same here 
    '34': contest // That's the new contest you want to inject in the store 
}