管理状态和使用输入

Question

我正在制作一个食谱盒应用程序，我决定从我的handleTitle 和handleInput 方法开始。我能够把它拉出来，但现在我想创建一个对象数组（对象包含标题和描述），然后我会映射这个数组并显示数据。

但是我的handleSubmit 函数没有按照我想要的方式工作。我希望用户能够编写多个标题和描述，并且这些将继续添加到该状态的食谱数组中。看一下代码：

import React, { useState } from "react";
import "./styles.css";

import { Form } from "./components/containers/Form";

export default function App() {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [recipe, setRecipe] = useState([]);

  const handleTitle = e => {
    setTitle(e.target.value);
  };

  const handleDescription = e => {
    setDescription(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    if (title !== "" && description !== "") {
      setRecipe(prevState => {
        const data = { title: title, description: description };

        return {
          ...prevState,
          recipe: prevState.recipe.concat(data)
        };
      });
    }
  };

  return (
    <div className="App">
      <Form
        title={title}
        description={description}
        handleTitle={handleTitle}
        handleDescription={handleDescription}
        handleSubmit={handleSubmit}
      />
    </div>
  );
}

import React from "react";

export const Form = ({
  handleTitle,
  handleDescription,
  handleSubmit,
  title,
  description
}) => {
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          onChange={handleTitle}
          placeholder="title"
          value={title}
        />

        <input
          type="text"
          onChange={handleDescription}
          placeholder="description"
          value={description}
        />
        <button>Add</button>
      </form>
    </div>
  );
};

Answer 1

当您设置食谱时，您将食谱状态的原始类型更改为对象。相反，您应该只返回一个包含先前配方和新配方的新数组。

我在下面附上了一个可运行的示例：

const Form = ({
  handleTitle,
  handleDescription,
  handleSubmit,
  title,
  description
}) => {
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          onChange={handleTitle}
          placeholder="title"
          value={title}
        />

        <input
          type="text"
          onChange={handleDescription}
          placeholder="description"
          value={description}
        />
        <button>Add</button>
      </form>
    </div>
  );
};

function App() {
  const [title, setTitle] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [recipes, setRecipes] = React.useState([]);

  const handleTitle = e => {
    setTitle(e.target.value);
  };

  const handleDescription = e => {
    setDescription(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    if (title !== "" && description !== "") {
      setRecipes(prevState => {
        const data = { title: title, description: description };
        return [...prevState, data];
      });
      setTitle("");
      setDescription("");
    }
  };

  return (
    <div className="App">
      <Form
        title={title}
        description={description}
        handleTitle={handleTitle}
        handleDescription={handleDescription}
        handleSubmit={handleSubmit}
      />
      <h5>Recipes</h5>
      {recipes.length === 0
        ? (
          <div>No recipes</div>
        )
        : (
        <ul>
          {recipes.map(({ title, description }) => (
            <li>
              {title} : {description}
            </li>
          ))}
        </ul> 
      )}
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>