reactjs - React 状态是 udpate 但不在 css doodle 标签中

Question

应用程序状态正常。当我更改 textarea 中的值时，它正在更新，我可以使用 react 实用程序看到状态组件的更改，但 css doodle 不会更新。我必须手动刷新才能看到我不明白为什么的更改。非常感谢

class App extends Component {
  state ={

    dood: doodText

  }

componentDidMount(){
const dood=localStorage.getItem('dood')

if(dood){

  this.setState({dood})

}
else{
  this.setState({dood: doodText})
}
}

componentDidUpdate(){

const {dood}= this.state
localStorage.setItem('dood', dood)

}

  handleChange = event =>{
var dood= event.target.value

this.setState({dood})
  }

  render(){

  return (

    <div className="container" onChange={this.handleChange} >

      <div className="row">
        <div className="col-sm-6">
        <textarea onChange={this.handleChange} value={this.state.dood}
        className="form-control"
        rows="25"  /> 

        </div>
      </div>

      <div className="col-sm-6" onChange={this.handleChange} >

  <css-doodle >{this.state.dood}</css-doodle>

      </div>
    <div>
    </div>
    </div>

  );
}
}
export default App;

Answer 1

css-doodle 提供了.update()手动更新的方法，见： https ://css-doodle.com/#js-api-update

所以你可以监听 textarea 的changeorinput事件然后调用.update()

Answer 2

只需设置一些顺序

我认为它应该可以工作，我在里面添加了一个带有 dood 的 div 来查看它是否可以工作。

我为你写了一些评论。

class App extends Component {

  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
  }

  state = {
    dood: doodText
  }

  componentDidMount() {
    const dood = localStorage.getItem('dood')
    if (dood) {
      this.setState({ dood })
    }
    // THIS ELSE DO NOT NECESSARY
    // else {
    //   this.setState({ dood: doodText })
    // }
  }

  componentDidUpdate() {
    // FOR WHY IS THAT HAPPEN EVERY UPDATE?
    const dood = this.state.dood
    localStorage.setItem('dood', dood)
  }

  // USE BIND IS BETTER
  handleChange(ev) {
    var dood = ev.target.value
    this.setState({ dood })
  }

  render() {
    return (
      <div className="container" >
        <div className="row">
          <div className="col-sm-6">
            <textarea onChange={this.handleChange} value={this.state.dood}
              className="form-control"
              rows="25" />
          </div>
        </div>

        <div>{dood}</div>

        <div className="col-sm-6" >
          <css-doodle >{this.state.dood}</css-doodle>
        </div>
      </div>
    );
  }
}
export default App;