时间戳

首页 > 解决方案 > 多个反应 useState 调用给出未定义的属性

javascript - 多个反应 useState 调用给出未定义的属性

问题描述

我正在尝试使用title属性实现笔记应用程序。以前，我的笔记应用程序在没有添加标题功能的情况下工作，但现在我已经集成了它，我有以下问题：textarea元素的返回（笔记文本本身）是未定义的，而返回元素（input注释标题）返回有效标题。

我敢肯定，下面的代码是错误源自的组件 - 组件是AddNote.

到目前为止我已经尝试过：

我没有尝试过的：

import React, { useState } from 'react';

const AddNote = ({ handleAddNote }) => {
  const [noteTitle, setNoteTitle] = useState('');
  const [noteText, setNoteText] = useState('');

  const handleSaveClick = () => {
    if ((noteText.trim().length > 0) && (noteTitle.trim().length > 0)) {
      handleAddNote(noteText);
      setNoteText('');

      handleAddNote(noteTitle);
      setNoteTitle('');
    }
  };

  return (
    <div className='note new'>
      <div className="toolbar">
        <button
          className='add-delete-icon'
          onClick={handleSaveClick}
        >+</button>
        <input
          type="text"
          className="note-title"
          placeholder="Add a title..."
          value={noteTitle}
          onChange={
            event => setNoteTitle(event.target.value)
          }
          autoFocus
        />
      </div>
      <textarea
        className="note-text"
        placeholder="Add an idea..."
        value={noteText}
        onChange={
          event => setNoteText(event.target.value)
        }
      ></textarea>
    </div>
  );
};

export default AddNote;

我在这里做错了什么，特别是在使用多个实例时useState，即这种“批处理”“setState”调用的想法？或者更确切地说，问题是否属于handleSaveClick匿名函数？

依赖组件 - 意思是指添加标题功能的组件 - 是Note组件 ( Pastebin )、NoteList组件 ( Pastebin ) 和值得注意的Home组件 ( Pastebin )。

标签： javascriptreactjsecmascript-6react-hooks

解决方案

查看代码，您应该handleAddNote这样调用

if ((noteText.trim().length > 0) && (noteTitle.trim().length > 0)) {
    handleAddNote(noteTitle, noteText);
    setNoteText('');
    setNoteTitle('');
  }

handleAddNote是 addNote 中的函数Home.jsx。addNote取title和text作为论据

const addNote = (title, text) => {....}

推荐阅读