React - 表单实例未插入列表

Question

我有这个表格，对象看起来正在正确更新，只是似乎没有正确覆盖列表。

我不确定为什么点击提交时 questionList 更新不会触发时插入 useEffect。

我相当确定我之前使用过类似的列表更新并且它们运行良好。

它应该在 ReadOnlyRows 部分呈现。

有什么建议吗？

import React, { useState, useEffect, Fragment  } from 'react';
import ReadOnlyRow from "./ReadOnlyRow";
import { Button, Form } from 'react-bootstrap';

export default function Tester2(props) {
  
    const [quiz, setQuiz] = useState({ title: "", timeLimit: 0, value: 0, hidden: false, questions:[] });
  const [questionList, setQuestionList] = useState([
      { id: 1, question : "question1", value:5, explaination : "answer1", 
      answers: [ {content: "aaa", correct: true},{content: "bbb", correct: false},{content: "ccc", correct: false},{content: "ddd", correct: false}]
    } ,
      { id: 2, question : "question2", value:10, explaination : "answer1", 
      answers: [ {content: "eee", correct: true},{content: "fff", correct: false},{content: "ggg", correct: false},{content: "hhhh", correct: false} ]
      }
  ])

    const [addFormData, setAddFormData] = useState({
        question : "", 
        value:0, 
        explaination : "", 
        answers: [ {content: "", correct: true},{content: "", correct: false},{content: "", correct: false},{content: "", correct: false} ]
    })

    const handleAddformChange = (e) => {
        e.preventDefault();
        const fieldName = e.target.getAttribute("name")
        const fieldValue = e.target.value;

        const newFormData = {...addFormData};
        newFormData[fieldName] = fieldValue;
        setAddFormData(newFormData);
    }

    const handleAddformSubmit = (e) => {
        e.preventDefault();

        const newQuestion = { question : addFormData.question, value:addFormData.value, explaination : addFormData.explaination };

        const newQuestionList = [...questionList, newQuestion];
        setQuestionList(newQuestionList)
    }

    return (
        <div className="app-container">
            <table>
                <thead>
                <tr>
                    <th>Question</th>
                    <th>Value</th>
                    <th>Correct Value</th>
                    <th>Edit</th>
                </tr>
                </thead>
                <tbody>
    
                {questionList.map((question, index) => (
                    <ReadOnlyRow question={question} key={index}/>
                ))}

                </tbody>
            </table>

            <h2>Input question</h2>
            <Form onSubmit={handleAddformChange}>
                <input type="text" name="Question" required="required" placeholder="Enter a title..." onChange={handleAddformChange}/>
                <br/>
                <input type="number" name="Value" required="required" placeholder="Enter a value..." onChange={handleAddformChange}/>
                <br/>
                <input type="text" name="Explaination" required="required" placeholder="Enter an explaination..." onChange={handleAddformChange}/>
                <br/>
                <Button type="submit" className="btn btn-warning">Add</Button>
            </Form>
        </div>
        );}

只读行：

import React from "react";

export default function ReadOnlyRow( question, handleEditClick, handleDeleteClick ) {
  return (

    <tr key={question.id}>
        <td>{question.value}</td>
        <td>insert here</td>
        <td>
        <button type="button" onClick={(event) => handleEditClick(event, question)}> Edit </button>
        <button type="button" onClick={() => handleDeleteClick(question.id)}> Delete </button>
        </td>
    </tr>
  );};

Answer 1

您正在根据之前的问题列表状态更新您的问题列表，您应该使用功能更新：

setQuestionList((prevQuestionList)=>([...prevQuestionList, newQuestion]))

而不是

const newQuestionList = [...questionList, newQuestion];
setQuestionList(newQuestionList)

阅读功能更新部分 https://reactjs.org/docs/hooks-reference.html#usestate

Answer 2

您错误地向 onSubmit

提供了错误的道具

而不是

onSubmit={handleAddformChange}

应该是

onSubmit={handleAddformSubmit}

Code Sandbox

React - 表单实例未插入列表

React - form instance not inserting to list

jsx

setstate

reactjs