再次，不确定这是否是你所需要的，所以让我知道。

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>
  );
}

这分别处理每个问题的答案更改和卡片标题更改。我在网上的一个奇怪的编辑器中写了这个，所以它可能不完美，但应该可以工作。

它应该

setCard((card) => { ...card , name: event.target.value });

您有几种方法可以做到这一点。

const [ card, setCard ] = useState( {
      name: "",
      questions: {
        1: {
          statement: "",
          answer: "",
        },
        2: {
          statement: "",
          answer: "",
        },
        //...
      }
    } );

    // To set an especifique answer or question, you can set the state like this:
    setCard( prev => ( {
      ...prev,
      questions: {
        ...prev.questions,
        1: {
          ...prev.questions[ 1 ],
          answer: "New answer"
        }
      }
    } ) );

    // To add a new question, you can set the state like this:
    setCard( prev => ( {
      ...prev,
      questions: {
        ...prev.questions,
        [ Object.keys( prev.questions ).length + 1 ]: {
          statement: "",
          answer: "",
        }
      }
    } ) );

    // To remove a question, you can set the state like this:
    setCard( prev => {
      const questions = { ...prev.questions };
      delete questions[ 1 ];
      return {
        ...prev,
        questions
      };
    } );

但是如果你想使用数组，你可以这样做：

// Solution with array
    const [card, setCard] = useState({
      name: "",
      questions: [
        {
          question: "",
          answer: "",
        },
        {
          question: "",
          answer: "",
        },
        //...
      ],
    } );

    // To set an especifique answer or question, you will need the index of the question, or null to set a new question.

    const setCardQuestions = ( index, question, answer ) => {
      setCard( ( prev ) => {
        const questions = [...prev.questions];
        if ( index === null ) {
          questions.push( {
            question,
            answer,
          } );
        } else {
          questions[ index ] = {
            question,
            answer,
          };
        }
        return {
          ...prev,
          questions,
        };
      });
    };

    // To remove a question, you will need the index of the question.
    const removeCardQuestion = ( index ) => {
      setCard( ( prev ) => {
        const questions = [...prev.questions];
        questions.splice( index, 1 );
        return {
          ...prev,
          questions,
        };
      });
    }