Question

在过去的一周中，我一直在尝试使用React，我了解了框架的许多关键思想，但不禁认为我缺少了一些关键的东西。我正在使用localstorage到setState，但由于使用了多个通过props传递数据的组件，因此它仅保留初始状态。传递数据时，我在每个组件上设置道具，然后从内部文件导入数据（使用内部公正测试）。感谢您的帮助。

这是index.js的代码段

import data from '../data/sample-data'
import data2 from '../data/sample-data2'

ReactDOM.render(
 <div>
  <GenericComponent data={data} />
  <GenericComponent data={data2} />
 </div>
, document.querySelector('.container'));

这里是组件

export default class GenericComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      content: props.data,
    }
  }

  componentWillUnMount() {
    localStorage.setItem('rootState', JSON.stringify(this.state))
  }

  componentDidMount() {
    this.setState({
      content: JSON.parse(localStorage.getItem('content')),
    })
  }

  componentWillMount() {
    localStorage.getItem('content') &&
      this.setState({
        contents: JSON.parse(localStorage.getItem('content')),
      })
  }

  componentDidUpdate(nextProps, nextState) {
    localStorage.setItem('content', JSON.stringify(this.state.content))
  }

  render() {
    const contentData = this.state.content.map(info => {
      return (
        <FormControlLabel
          key={info.id}
          control={
            <Checkbox
              checked={info.checked}
              check={info.label}
            />
          }
          label={info.label}
        />
      )
    })

    return (
      <div className="checklist">
        <div className="banner">
          <h2 className="title">{this.props.formTitle}</h2>
        </div>
        <FormControl component="fieldset">
          <FormGroup>{contentData}</FormGroup>
        </FormControl>
      </div>
    )
  }
}

导入的数据

export default [
  {
    id: 0,
    label: 'The Label',
    checked: false,
  },
]

React-数据流最佳做法（初学者）

0 个答案: