Question

这是我在 React 应用程序中遇到的错误。请帮我解决这个问题。我扩展了代码以便更好地理解。不知道是什么问题

const TextEditor = (value, props) => {
   console.log(props.value)
   console.log(props.value.length)
   const renderElement = useCallback(props => <Element {...props} />, [])
    const renderLeaf = useCallback(props => <Leaf {...props} />, [])
    const editor = useMemo(() => withHistory(withReact(createEditor())), [])

更新-正如所说，我已经添加了我传递值的代码。我已经使用 value= {value.document} 在下面的 initialValues 中初始化文档

 const TextEditor = (value, props) => {
      console.log(props.value)
      console.log(props.value.length)
      const renderElement = useCallback(props => <Element {...props} />, [])
      const renderLeaf = useCallback(props => <Leaf {...props} />, [])
      const editor = useMemo(() => withHistory(withReact(createEditor())), [])
      const [isPreviewModalOpen, setPreviewModal] = useState(false);
      
      const initialValues= {
        title:value.title,
        document: value.document,
      }
    
      return (
        <>
        
          <div className="text-center pt-3">
            <h2 style={{color: "#3D44C8", fontWeight: "bold"}}>Ask an expert</h2>
            <p style={{color: "#DB262F", fontWeight: "bold", fontSize: "18px"}}>Get your questions solved within 24 hours!</p>
          </div>
          <Slate editor={editor} value={props.value} onChange={value => {
            props.setValue(value);}} >
            <div className="textEditor_toolbar">
              <div className="textEditor_buttonedit">
                <Navbar style={{padding: "0"}} expand="lg">
                  <Navbar.Toggle aria-controls="basic-navbar-nav" />
                  <Navbar.Collapse id="basic-navbar-nav">
                    <Navbar.Brand>
                      <ButtonGroup>
                        <MarkButton format="bold" tooltip="bold" icon={faBold}/>
                        <MarkButton format="italic" icon={faItalic} />
                        <MarkButton format="underline" icon={faUnderline} />
                      </ButtonGroup>
                      <ButtonGroup>
                        <MarkButton2 format="code" icon={faCode}/>
                        <BlockButton format="bulleted-list" icon={faListUl} />
                        <BlockButton format="numbered-list" icon={faListOl} />
                      </ButtonGroup>
                    </Navbar.Brand>     
                        <Nav>
                          <label className="custom-file-upload">
                            <input
                              type="file"
                              name="profileImg"
                              accept="image/png, image/jpeg"
                              multiple="false"
                              onChange={setImage}
                            />
                            <FontAwesomeIcon className="custom-file-icon" icon={faPaperclip}/>
                          </label>
                        </Nav>
                        <Form> 
                          <Choice  />
                        </Form>
                    </Navbar.Collapse>
                  </Navbar>
                  </div>
                </div>
              <div>
            </div>
            <Editable
              className="textEditorMain"
              renderElement={renderElement}
              renderLeaf={renderLeaf}
              value={value.document}
              placeholder="Type your Question, Paste your Question text or Attach images or PDF here"
              spellCheck
              autoFocus
              useReadOnly
              onPaste = {onPaste}
              onKeyPress={event => {
                for (const hotkey in HOTKEYS) {
                  if (isHotkey(hotkey, event )) {
                    event.preventDefault()
                    const mark = HOTKEYS[hotkey]
                    toggleMark(editor, mark)
                  }
                }
              }}
            />
          </Slate>

Answer 1

props.value 未定义，请确保正确传递道具

类型错误：无法读取 react.js 中未定义的属性“长度”

1 个答案: