尝试绑定提交并保存到 localStorage

Question

在我的 App.js 代码中，我试图将“handlesubmit”function 和 append 绑定并捕获到一个将被填充的空列表。 谢谢。

import React from 'react';

const App = () => {
  const [songs, setSongs] = React.useState([]);

  React.useEffect(() => {
    const data = localStorage.getItem('songs');
    if (!data) { }
    setSongs(JSON.parse(data));
  }, []);

  React.useEffect(() => {
    localStorage.setItem('songs', JSON.stringify(songs));
  });

  const handleSubmit = data => {
    setSongs([data]);
  }

  return (
    <main>
    <h1>Music Editor</h1>

    <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))} autoComplete="false">
      <label for="title">Title:</label>
      <input type="text" id="title" name="title" placeholder="Type title/name of song" value="" />
      <input type="submit" value="Add song" />
    </form>

    </main>
  );
}

export default App;

Answer 1

解释在代码本身中注释。 这是查看应用程序工作的代码框链接。

import React from 'react';

const App = () => {
  const [songs, setSongs] = React.useState([]);

  // use another state for song title
  const [songTitle, setSongTitle] = React.useState('');

  React.useEffect(() => {
    const data = localStorage.getItem('songs');
    // only update the state when the data persists
    if (data) setSongs(JSON.parse(data));
  }, []);

  // update the localStorage whenever the songs array changes
  React.useEffect(() => {
    localStorage.setItem('songs', JSON.stringify(songs));
  }, [songs]);

  // inside the functional component, there is no "this" keyword
  const handleSubmit = (event) => {
    event.preventDefault();
    // append the new song title with the old one
    setSongs([
      ...songs,
      songTitle
    ]);
  }

  return (
    <main>
    <h1>Music Editor</h1>

    <form onSubmit={handleSubmit} autoComplete="false">
      <label htmlFor="title">Title:</label>
      <input 
        type="text" 
        id="title" 
        name="title" 
        placeholder="Type title/name of song" 
        value={songTitle}
        onChange={e => setSongTitle(e.target.value)}
      />
      <input type="submit" value="Add song" />
    </form>

    </main>
  );
}

export default App;