Javascript 对象列表中多个值的setState

发布于11月28日

我有问题，我不知道怎么解决它. 所以我有一个组件，我在其中声明了一个对象array. 我想单独设置它的状态，但我不想声明多个useState.

我有一个对象数组，如下所示:

const [card, setCard] = useState({
    name: "",
    questions: [
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
      {
        question: "",
        answer: "",
      },
    ],
  });

下面是它的组成部分:

const NewCard = () => {
  const handleNameChange = (event) => {
    setCard({ name: event.target.value, ...questions });
  };
  return (
    <div className="newcard-container">
      <div className="card-container">
        <h3>Podaj nazwe fiszki</h3>
        <input type="text" value={card.name} />
      </div>
      <div className="questions-container">
        {card.questions.map((q) => {
          return (
            <div className="question">
              <h4>Podaj pytanie </h4>
              <input type="text" value={q.question} />
              <h4>Podaj odpowiedź</h4>
              <input type="text" value={q.answer} />
            </div>
          );
        })}
        <button>Dodaj pytanie</button>
      </div>
    </div>
  );
};

我试图弄清楚如何更改setState以实现这种方法，但我没有成功.你知道我怎么才能弄到吗？

import React, { useState, useCallback } from 'react'; export function App() { const [card, setCard] = useState({ name: "", questions: [ { id: 'question-1', question: "Question 1", answer: "", }, { id: 'question-2', question: "Question 2", answer: "", }, { id: 'question-3', question: "Question 3", answer: "", }, ] }); const handleCardNameChange = useCallback((ev) => { setCard((c) => ({ ...c, name: ev.target.value })) }, [setCard]); const handleAnswerChange = useCallback((cardId, value) => { const updatedQuestions = card.questions.map((c) => { if (c.id !== cardId) { return c; } return { ...c, answer: value, } }); setCard({ ...card, questions: updatedQuestions, }) }, [card, setCard]); return ( <div> <input placeholder="Card Title" value={card.name} onChange={handleCardNameChange} /> {card.questions.map((c) => ( <div key={c.id}> <p>Q: {c.question}</p> <input placeholder="Answer" value={c.answer} onChange={(ev) => handleAnswerChange(c.id, ev.target.value)} /> </div> ))} </div> ); }

Javascript 对象列表中多个值的setState

推荐答案

Javascript相关问答推荐

Angular material 拖放堆叠的牌副，悬停时自动展开&

无法读取未定义错误的属性路径名''

从包含数百行的表中获取更改后的值(以表单形式发送到后端)的正确方法是什么？

覆盖TypeScrip中的Lit-Element子类的属性类型

在开发期间，Web浏览器如何运行&qot；.jsx&qot；文件？

MongoDB受困于太多的数据

如何使用画布在另一个内部绘制一个较小但相同的形状，同时保持恒定的边界厚度？

不协调嵌入图片

谷歌饼图3D切片

为什么我的SoupRequest"；被重置为初始值，以及如何修复它？

在高位图中显示每个y轴系列的多个值

设置复选框根据选中状态输入选中值

使用静态函数保存 node 前的钩子

单击子按钮时将活动切换类添加到父分区

如何为Reaction应用程序创建仅登录的路由？

将数据添加到数据库时不输出

更改输入文本框的背景时出现问题

获取S点击的元素类(这？)并将其应用于另一个元素(目标)，同时删除目标元素上的所有类

在Java脚本/类型脚本中覆盖父构造函数中的默认值

JAVASCRIPT｜导入模块中断FOR循环