如何在另一个带有 props 的组件中使用 useState 函数？

Posted 2023-02-23

【中文标题】如何在另一个带有 props 的组件中使用 useState 函数？

【英文标题】：How to use a useState function in another component with props?

【发布时间】：2021-01-01 07:15:08

【问题描述】：

我编写了一个 React.js 笔记 Web 应用程序，用户可以在其中添加最多 10 个笔记。

我使用map() 来迭代音符数组，并使用useState(1) 钩子来更新它的计数（音符的默认数量是1），所以我想做这样的事情：

  [...Array(noteCount)].map((_, i) => <Note onUpdateNoteCount=() =>setNoteCount(n => n - 1) key=i />)

问题是 Note() 组件位于 App() 组件中的 Main() 组件内，所以我想获得所需的值作为 App() 的道具，然后在 Note() 中使用它们，但不知道如何以及在何处放置它。

谢谢！

App.js

  import React from 'react';
  import Header from './Header';
  import Main from './Main';
function App () 
  const [noteCount, setNoteCount] = React.useState(1);
  function multiplyNoteComponent () 
    if (noteCount < 20) 
      setNoteCount(n => n + 1)
    
    else 
      alert('too many notes. remove or combine some of them together!')
    
  
  return (
    <div>
      <Header/>
      [...Array(noteCount)].map((_, i) => <Main onUpdateNoteCount=() =>setNoteCount(n => n - 1) key=i />)

      <button
            style=left: '5%'
          id='addNoteBtn'
          onClick=multiplyNoteComponent
          title='Add a note'
         >
        +
      </button>
    </div>
  );

  export default App;

Main.js

    import React from 'react';
    import Note from './Note';
function Main () 
    return (
        <main>
            your notes are:
            <Note/>
        </main>
    )

    export default Main;

Note.js

    import React from 'react';
function Note () 
    return (
        <div> <button title='delete note' onClick=>X</delete>
            <li>
                <input type='text'/>
            </li>
        </div>
    )

    export default Note

编辑：我认为我需要在 Note() 组件中使用 setNoteCount() 函数的原因是在删除笔记时倒计时（每个笔记都有自己的删除按钮）。

【问题讨论】：

你可以从 App -> Main -> 注意这里的解释：***.com/a/59540647/5427320

也许App 应该将Notes 作为孩子传递给Main。我不太关注我们，您正在跟踪 number 条笔记。您需要将文本保存在某处，对吗？为什么不只是一个字符串数组？

@AtifSaddique 谢谢，但我想我需要以某种方式将 setNoteCount() 传递给 Note.js()，不是吗？ :)

如果您在子组件中需要 setNoteCount，那么您也可以将该函数作为 prop 传递给子组件，但我认为您不应该将整体 noteCount 设置函数传递给单个注意，父母应该处理设置的音符计数。

我认为您应该多解释一下您的需求，我从您的问题中了解到，您需要将一些道具从App.js传递给Note.js，这可以通过传递道具来完成从 App.js 到 Main.js，然后从那里到 Note.js

【参考方案1】：

我会推荐你​​的应用程序的这种架构。

将Notes 数组存储在App 级别。 使用NoteInput 添加注释，它将注释添加到您的Notes 数组中。 使用Note 组件映射您的Notes，该组件将onDelete 作为App 级别的道具。 您的App 组件应负责存储和删除状态中的注释。

在您的示例中，notesCount 表示衍生状态。 即它可以简单地从Notes 数组（notes.length）派生。

因此，我建议不要存储 notesCount，而是存储笔记并从中派生计数。

您可以在此处查看工作示例：- https://stackblitz.com/edit/react-g19tei

import React from "react";
import "./style.css";

const NOTES_ALLOWED = 10;

export default function App() 
  const [notes, setNotes] = React.useState([]);

  function addNote(newNote) 
    if (notes.length === NOTES_ALLOWED) 
      alert(`Only $NOTES_ALLOWED notes are allowed to be added`)
     else 
      setNotes([...notes, newNote]);
    
  

  function handleDelete(deleteNoteIdx) 
    const newNotes = [...notes];
    // delete the note at the specific index
    newNotes.splice(deleteNoteIdx, 1)
    setNotes(newNotes);
  

  return (
    <div>
      <div style= marginTop: 20, marginBottom: 20 >
        <p>Your notes are</p>
        notes.map((note, idx) => ( 
          <Note 
            note=note 
            onDelete=() => handleDelete(idx) 
          />
        ))
      </div>
      <NoteInput onAdd=addNote />
    </div>
  );


function Note( note, onDelete ) 
  return (
    <div>
     <p>note
      <button onClick=onDelete>Delete Note</button>
     </p>
    </div>
  )


function NoteInput( onAdd ) 
  const [note, setNote] = React.useState('');

  function handleSubmit(e) 
    e.preventDefault();
    const noteToBeSend = note;
    setNote('')
    onAdd(noteToBeSend.trim());
  

  return (
    <div>
     <form onSubmit=handleSubmit>
        <input 
          type="text" 
          value=note
          onChange=e => setNote(e.target.value)
          required
        />
        <button type="submit">Add Note</button>
      </form>
    </div>
  )

【讨论】：

谢谢队友，你的回答+阅读 react props * 5 的文档帮助很大！我只是想知道，转移给孙子的道具是开始使用 Redux 的理由吗？

在当前的 React 场景下，虽然没有必要使用 Redux。您可以简单地使用Context API。使用 Redux 和 Context API 的唯一区别是使用 Redux 优化了性能。