TypeError：無法讀取 react.js 中未定義的屬性“長度”

Question

這是我在我的反應應用程序中遇到的錯誤。 請幫我解決這個問題。 我已經擴展了代碼以便更好地理解。 有什么問題

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未定義，請確保您正確傳遞了您的道具