Question

我有一个LessonEditor组件，它通过一个名为setValues的功能传递给子组件props：

const [values, setValues] = React.useState({
    title: 'This is a long lesson title lol lol',
    desc: 'This is a description',
    location: '1',
    content: 'I\'m a poteto',
});

const handleChange = (name, value) => {
    console.log(name + value);
    setValues({ ...values, [name]: value });
};

我传递道具的第一个组件是：

<LessonContents

    editing={editing}
    title={values.title}
    desc={values.desc}
    content={values.content}
    location={values.location}

    setValues={handleChange} // right here
/>

然后在LessonContents内部，我还有一个传递setValues函数的组件：

<TextEditor
    content={props.content}
    setContent={props.setValues}
/>

然后最后在TextEditor中，代码是：

import React from 'react';

export default function TextEditor(props) {

    return (
        <div
            suppressContentEditableWarning={true}
            id='editor'
            contentEditable
            onKeyDown={(e) => props.setContent('content', e.target.innerHTML)}
        >
            {props.content}
        </div>
    )
}

当我尝试在contentEditable div中键入文本时，将触发错误。为什么？

编辑：现在我刚刚意识到输入文本字段也引起了错误，但是如果我删除了LessonContent.js中包含的代码，输入文本将再次起作用：

            <div className='box-content justify-left'>
                <LessonLocation
                    location={props.location}
                    setLocation={props.setValues}
                 />
            </div>
            <div className='box-content justify-left'>
                <TextEditor
                    content={props.content}
                    setContent={props.setValues}
                />
            </div>

Answer 1

我不知道为什么会这样，但是如果我禁用对LessonLocation组件的更新，错误将停止：

export default class LessonLocation extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    const data = {
      label: 'hello',
      value: 'hello'
    }

    return <Tree data={data}></Tree>
  }
};

这与<Tree />更新有关。我不知道为什么它甚至会更新，它似乎并不需要您使用的数据。如果需要根据数据进行更新，则应尝试自己对shouldComponentUpdate（）进行检查。

ReactJS错误：超过最大更新深度

1 个答案: