[英]How to resolve Cannot read property 'length' of undefined in React.js
[英]TypeError: Cannot read property 'length' of undefined in react.js
这是我在我的反应应用程序中遇到的错误。 请帮我解决这个问题。 我已经扩展了代码以便更好地理解。 有什么问题
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>
props.value
未定义,请确保您正确传递了您的道具
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.