javascript - 如何从另一个表单组件更新书籍列表？

Question

大家好，我有点新来 react ，我正在尝试有关某种图书库的教程。我有一个 AddNewBook 组件，它是这样的 form:

function AddNewBook(){
  const [name, setName] = useState("");
 
  const handleChange = e => setName(e.target.value);
  return (
    <input name="book-name" onChange={handleChange} />
  )
}

我还有另一个组件，我可以像这样展示书籍:

function BooksList(){
  const [books, setBooks] = useState([]);

  return (books?.map((book, i) => <div key={i}>{book.name}</div>))
}

我有这样的 App.js 组件:

function App(){

 return (
  <div> 
   <AddNewBook />
   <BooksList />
  </div>
 );
}

我的问题是如何以最佳实践方式更新 booksList。有可能我以后可能会扩展这些组件并围绕此添加更多组件。

Answer 1

简单的方法是将 bookList 状态提升到 App.js 组件，AddNewBook 和 BooksList 都可以访问它。然后将必要的东西作为 Prop 传递给组件。
另一种基于您对 future 嵌套组件的看法的方法是像这样使用 React Context ，如果将来您有更多的 child ，则不需要更改代码。

//create a bookContext.js
const bookContext = React.createContext();
const useBookContext = () => React.useContext(bookContext);
const BookContextProvider = ({ children }) => {
  const [books, setBooks] = useState([]);

  const addNewBook = (newBook) => {
    setBooks((books) => [...books, newBook]);
  };
  // if you have other methods which may change the books add them here
  return (
    <bookContext.Provider
      value={{
        books,
        setBooks,
        addNewBook,
      }}
    >
      {children}
    </bookContext.Provider>
  );
};

然后像这样用它包装你的 Components:

function App() {
  return (
    <BookContextProvider>
      <AddNewBook />
      <BooksList />
    </BookContextProvider>
  );
}

并相应地更新您的组件:

function AddNewBook() {
  const [name, setName] = useState("");
  const handleChange = (e) => setName(e.target.value);

  const { addNewBook } = useBookContext();
  const handleSubmit = () => {
    addNewBook(name);
  };

  return (
    <>
      <input name="book-name" onChange={handleChange} />
      <button onClick={handleSubmit}>submit</button>
    </>
  );
}

function BooksList() {
  const { books } = useBookContext();
  return books?.map((book, i) => <div key={i}>{book.name}</div>);
}