Reaction-Form实例未插入到列表 [英] React - form instance not inserting to list

问题描述

我有此表单，对象似乎正在正确更新，只是似乎没有正确覆盖列表。

我不确定原因，当questionList更新在单击"提交"时未触发时，插入要触发的useEffect。

我相当确定我以前使用过类似的列表更新，它们工作得很好。

应在ReadOnlyRow%s节内呈现。

有什么建议吗？

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

推荐答案

您正在基于上一个问题列表状态更新问题列表，您应该使用函数更新：

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

而不是

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

阅读的函数更新部分 https://reactjs.org/docs/hooks-reference.html#usestate

这篇关于Reaction-Form实例未插入到列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！