如何在用戶交互中使用React render（）更新UI？

render() { 
    const skills = App.skills.map((label, index) => { 
     const value = User.SKILLS[index]; 
     const stateSkills = new Set(this.state.skills); 
     console.log("VALUE", value); 
     console.log('State skills', stateSkills); 
     const checked = stateSkills.has(value); 
     return (
     <Skills 
      key={value} 
      value={value} 
      label={label} 
      checked={checked} 
      addSkills={this.addSkills.bind(this)} 
      removeSkills={this.removeSkills.bind(this)} 
     /> 
    ); 
});

我在從端點請求數據後，使用this.setState設置this.state.skills。然後我試圖使用stateSkills.has（value）更新複選框。即使評估結果爲真，複選框也不勾選。記錄狀態這裏的技能確實顯示了從端點獲取的正確數據。如何在用戶交互中使用React render（）更新UI？

import React from 'react'; 
import {CellBody, CellHeader, Checkbox, FormCell} from 'react-weui'; 


const Skills = ({label, value, checked, addSkills, removeSkills}) => { 
    const toggle = checked ? removeSkills : addSkills; 

    return (
    <FormCell 
     checkbox 
     key={value} 
    > 
    <CellHeader> 
     <Checkbox 
     name={value} 
     value={value} 
     defaultChecked={checked} 
     onClick={() => toggle(value)} 
    /> 
    </CellHeader> 

    <CellBody>{label}</CellBody> 
</FormCell> 
); 
}; 

Skills.propTypes = { 
    label: React.PropTypes.string.isRequired, 
    value: React.PropTypes.string.isRequired, 
    checked: React.PropTypes.bool.isRequired, 
    addSkills: React.PropTypes.func.isRequired, 
    removeSkills: React.PropTypes.func.isRequired, 
}; 

export default Skills;

來源

2017-06-23 Aayush Chadha

你的渲染方法看起來不合適我。你回來什麼'技能'？什麼是App.skills？是靜態屬性還是反應狀態？ –

技能是一個組件。 App.skills是一個靜態屬性。 –

你能向我們展示技能組件嗎？ –

的電流分量。當重新渲染，技能變化的道具，它重新渲染的技巧，但它並沒有改變選中的值（也許是狀態），你應該定義在組件技能：

componentWillReceiveProps(nextProps) { 
    if (nextProps.checked !== this.props.checked) { 
    // setState and it will re-render 
    } 
}

來源

2017-06-23 04:04:48

對狀態或道具的更改是否觸發組件的重新渲染？ https://facebook.github.io/react/docs/react-component.html –

@ D收割者，是的，但我們必須看看OP如何編寫他的'技能'組件。由於被檢查的財產正在使用 –

編輯@ D-reaper 我認爲你應該詳細提供'技能' –

如何在用戶交互中使用React render（）更新UI？

回答

相關問題