React开发WordPress插件：嵌套map函数渲染解决方案问题

你当前的代码有几个关键问题导致解决方案无法正确渲染，结合React核心概念给你修正：

核心问题梳理 #

1. 直接修改对象/数组不会触发渲染：React需要通过状态更新机制感知数据变化，你直接修改question.title或者调用question.addS修改solutions数组的方式，React无法检测到，所以新添加的解决方案不会显示。
2. onChange事件绑定错误：你写的onChange={question.title = handleTextInputChange}是直接赋值操作，不是绑定事件处理函数，输入框的变更不会触发预期的逻辑。

修正后的完整实现 #

用React函数组件结合useState管理状态，这是React最基础的状态管理方式，适合你的场景：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function QuizBuilder() {
  // 初始化题目状态，每个题目包含solutions数组
  const [questions, setQuestions] = useState([
    {
      qIdTitle: '题目1',
      qTypeTitle: '单选题',
      title: '',
      desc: '',
      solutions: []
    }
    // 可以在这里添加更多初始题目
  ]);

  // 处理题目标题/描述的输入变更
  const handleQuestionInputChange = (qIndex, field, value) => {
    setQuestions(prevQuestions => {
      const newQuestions = [...prevQuestions];
      newQuestions[qIndex][field] = value;
      return newQuestions;
    });
  };

  // 给指定题目添加新解决方案
  const addSolution = (qIndex) => {
    setQuestions(prevQuestions => {
      const newQuestions = [...prevQuestions];
      // 给对应题目添加新的解决方案对象，这里可以定义默认结构
      newQuestions[qIndex].solutions.push({
        text: '',
        isCorrect: false // 示例：标记是否为正确答案
      });
      return newQuestions;
    });
  };

  // 处理解决方案的输入变更
  const handleSolutionInputChange = (qIndex, sIndex, field, value) => {
    setQuestions(prevQuestions => {
      const newQuestions = [...prevQuestions];
      newQuestions[qIndex].solutions[sIndex][field] = value;
      return newQuestions;
    });
  };

  return (
    <div className='w-100'>
      {questions.map((question, qIndex) => (
        <div key={qIndex} style={{ marginBottom: '20px', padding: '10px', border: '1px solid #eee' }}>
          <div>{question.qIdTitle}</div>
          <div>Type: {question.qTypeTitle}</div>
          <div>
            Question title
            <input
              type="text"
              value={question.title}
              onChange={(e) => handleQuestionInputChange(qIndex, 'title', e.target.value)}
            />
          </div>
          <div>
            Question description
            <input
              type="text"
              value={question.desc}
              onChange={(e) => handleQuestionInputChange(qIndex, 'desc', e.target.value)}
            />
          </div>
          <button onClick={() => addSolution(qIndex)}>Add a solution</button>
          <div style={{ marginTop: '10px' }}>
            {question.solutions.map((solution, sIndex) => (
              <div key={sIndex} style={{ marginBottom: '8px' }}>
                <input
                  type="text"
                  placeholder="Solution text"
                  value={solution.text}
                  onChange={(e) => handleSolutionInputChange(qIndex, sIndex, 'text', e.target.value)}
                />
                <label style={{ marginLeft: '10px' }}>
                  <input
                    type="checkbox"
                    checked={solution.isCorrect}
                    onChange={(e) => handleSolutionInputChange(qIndex, sIndex, 'isCorrect', e.target.checked)}
                  />
                  正确答案
                </label>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// 渲染到指定DOM节点
const qc = document.getElementById('your-dom-id'); // 替换成你的实际DOM节点ID
ReactDOM.render(<QuizBuilder />, qc);

关键说明 #

• 状态更新必须用setter：所有修改questions或内部solutions的操作，都要通过setQuestions完成，并且要返回新的数组/对象（用扩展运算符...复制原数据，避免直接修改），这样React才能检测到变化并重新渲染。
• 渲染列表要加key：map渲染的元素必须添加唯一的key属性，帮助React高效更新DOM，这里用索引qIndex和sIndex是最简单的方式（如果有唯一ID用ID更好）。
• 事件处理传递必要参数：通过事件处理函数传递题目索引、解决方案索引和字段名，才能精准更新对应的数据。

按照这个代码实现，点击"Add a solution"按钮后，新的解决方案输入框会立即渲染到页面上，输入内容也能正确绑定到状态中。

内容的提问来源于stack exchange，提问作者Linards Liepenieks