在不更改条件的情况下，在 state 更改时重新渲染条件

Question

我有一个条件显示一个编辑器，而某个道具仍然是真实的。 问题是，每次我使用 select 另一个 object 来填充该编辑器时，该编辑器所使用的数据都应该更改。

但是，由于负责条件渲染的道具没有改变，即使渲染编辑器的数据发生了变化，它也拒绝在 state 更改时重新渲染。

我不是特别擅长 React，所以，希望有人能解释我如何解决这个小问题。

条件渲染

{this.state.showEditor ? (<BlockEditor routine={this.state.editorObject} />) : null}

被调用的方法。

handleShowEditor = routine => {
    this.setState({ showEditor: true });
    this.setState({ editorObject: routine });
  };

编辑器组件

export default class BlockEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      routine: this.props.routine
    };
  }

render() {
    return (
      <div>
        <Editor
          autofocus
          holderId="editorjs-container"
          onChange={data => this.handleSave(data)}
          customTools={{}}
          onReady={() => console.log("Start!")}
          data={this.props.routine.description}
          instanceRef={instance => (this.editorInstance = instance)}
        />
      </div>
    );
  }
}

Answer 1

是否有单独设置 state 的理由？ 为什么不

handleShowEditor = routine => {
    this.setState({ 
        showEditor: true,
        editorObject: routine
    });
};

请记住， setState是异步的，您的实现可能会导致这种奇怪的行为。

Answer 2

如果您仍在寻找答案，我在使用相同的 [Editor.JS][1] 时遇到了同样的问题:)。

这对我有用的功能组件：

// on change fires when component re-intialize
      onChange={async (e) => {
        const newData = await e.saver.save();
    
          setEditorData((prevData) => {
             console.log(prevData.blocks);
             console.log(newData.blocks);
    
              if (
                JSON.stringify(prevData.blocks) === JSON.stringify(newData.blocks)
               ) {
                  console.log("no data changed");
                  return prevData;
              } else {
                console.log("data changed");
                return newData;
              }
           });
         }}
         // setting true to re-render when currentPage data change
         enableReInitialize={true}

在这里，我们只是检查数据更改是否将其分配给 editorData 组件 state 并执行重新渲染，否则按原样分配 prevData，这不会导致重新渲染。

希望能帮助到你。

编辑：

• 我正在比较编辑器数据块更改是数组。
• 当然，您需要比我所做的更深入地比较块，例如，您可以使用 lodash。 [1]： https://github.com/editor-js/awesome-editorjs

Answer 3

由于setState是异步的，您可以在其回调中进行另一个调用。

像这样试试

handleShowEditor = routine => {
this.setState({ 
    showEditor: true
}, () =>{
     this.setState({
       editorObject: routine
     )}
});
};