在渲染過程中更新存儲

我有一個數據庫作爲json文件。在渲染過程中，我隨機選取幾個對象，並且在映射數據庫時想更新全局存儲，但在render（）中調用dispatch導致大量錯誤，而我不知道如何進一步處理。在渲染過程中更新存儲

這裏是我有沒有錯誤：

render() { 
     const fakePayload = this.props.fakePayload; 
     const rngPayloadId = Math.floor(Math.random() * 4); 

     const payload = fakePayload.map(payload => { 

      if (payload.payloadId === rngPayloadId) { 

       return payload.drugsId.map(id => { 
        return <tr> 
         <td> {id}</td> 
         <td>{drugs[id].name}</td> 
         <td><input value={undefined} type="number" name="price" /></td> 
         <td><button >Send</button></td> 
         <td><button>X</button></td> 
        </tr> 
       }) 
      } 
     }) 

     return (
      <tbody>{payload}</tbody> 
     )

什麼我希望做的是一樣的東西：

return payload.drugsId.map(id => { 
    this.props.dispatch(setId(randomNumber, id)

如果它的事項採取行動看起來是這樣的：

export const setId = (id, drugId) => ({ 
    type: 'SET_ID', 
    renderedDrugs: { 
     id, 
     drugId 
    } 
})

我需要學習/做什麼？

來源

2017-09-26 MazMat

現在你似乎有一些靜態數據，但遲早會（可能）被實際的數據庫和/或服務器API調用所取代。有很多關於這個問題的答案，例如：https://stackoverflow.com/questions/39813984/how-to-fetch-data-through-api-in-redux（查看JSFiddle鏈接中的代碼接受答案）。它涉及大部分您需要考慮的概念。請注意，這是Redux中難度較大的事情之一，因此請花點時間瞭解它，嘗試並在問題發生時提出問題。祝你好運！ – jonahe

也許是因爲你正在渲染渲染動作。你有沒有試過調動componentDidMount()的動作？基於註釋

：

constructor(props){ 
    super(props); 

    this.state = { 
     rngId: 0 
    }; 
} 

render(){ 
    this.setState({rngId: Math.floor(Math.random() * 4)}); 
    ... 
} 

componentDidMount(){ 
    this.props.dispatch(....); 
}

來源

2017-09-26 09:30:51

我沒有，因爲我不知道如何訪問必要的數據時，其已經呈現，並沒有存儲在任何地方。 – MazMat

@MazMat你可以像它建議的那樣在'componentDidMount（）'中渲染它，然後將它存儲在狀態中並在需要時使用。 – ummahusla

生命週期事件作出反應的核心部分。爲了使用Redux，你必須閱讀並理解它以達到某種能力。您不能在render中使用動作，因爲動作會更新您的商店，該商店會更新組件，該組件會調用render，這也會調用您的動作，它會更新組件，其中調用render ...我確信您會看到它的位置去。

您正在查找componentWillMount或componentDidMount。這些方法中的函數將被調用一次，並且在組件被裝載時不會再次調用自身。參考關於生命週期事件或其他資源的Facebook React文檔，如教程。

編輯回答您的評論的問題。控制渲染更改的常見範例是更新組件的方法是使用布爾（true/false）三元語句來顯示元素或隱藏它（簡化，但現在可行）。您會尋找類似這個。

class SampleComponent { 
constructor() { 
    this.state = { 
    show: false 
    } 
} 
componentDidMount() { 
    this.setState({show: true}) 
} 
render() { 
    return (
    <div> 
     { this.state.show ? <div>mounted</div> : null } 
    </div> 
) 
}

將會有幾乎零用例來做這樣的事情。 componentDidMount在組件安裝時發生得如此之快，以至於您立即將this.state.show更改爲true。您使用狀態隱藏的html元素會顯示爲從未控制過狀態。

來源

2017-09-26 10:47:03 Andrew

我仍然不知道它，我知道這些組件如何工作，我只是不知道我將如何呈現在componentDidMount中創建的東西。假設我在DiDMount中創建一個返回

Hello

的常量。如何在屏幕上顯示它/將它傳遞給主渲染功能？ – MazMat

@MazMat更新。你會看到html元素是'prepped'來顯示的，但是由'this.state.show'控制它是否實際出現在屏幕上。 – Andrew

在渲染過程中更新存儲

回答

相關問題