渲染文本輸入后使用useState Hook更新對象

Question

我正在為我們的公司構建調試清單應用程序的早期階段。 由於清單很大（其中許多清單），因此我想創建一個映射到對象的函數，並且在渲染所編寫的值之后，將使用useState Hook更新相應的狀態。

該頁面正在呈現，沒有任何問題。 僅在更改輸入后才出現問題。 而不是更新對象中的正確狀態。 邏輯似乎是在對象中添加了一個附加部分並創建了另一個輸入元素。

import React, { useState } from 'react'


const ProjectInfo = () => {

  const _renderObject= () => {
     return Object.keys(answers).map((obj, i) => {
        return(
            <div key={obj}>
                <label>{answers[obj].question}</label>
                <input type="text" onChange={(e, obj) => setAnswer(
                    {
                    ...answers,
                    obj:{
                       value: e.target.value
                    }})} />    
            </div>
        )
    })
}

const [answers, setAnswer] = useState({
    11:{
        question:"Project Name",
        value:""
    },
    12:{
        question:"Project Number",
        value:"" 
    }
})

    return(
        <div>
            <section>
                {_renderObject()}
            </section>
            <p>{`Project Number is: ${answers[11].value}`}</p>
            <p>{`Project Name is: ${answers[12].value}`}</p>
        </div>
    )
}

export default ProjectInfo

我期望狀態可以正常更新。 但是我懷疑是在我的renderObject方法中，我的.map函數的obj變量未在setAnswer函數中使用，並導致另一個字段的鍵名是“ obj”。

如果這是問題所在，是否可以在我的renderObject方法中使用setAnswer函數來使用map函數的“ obj”值，而不是將obj這個詞的實際值用作鍵？

如果不是，最好的方法是什么？ 我正在考慮在屏幕底部添加一個提交按鈕，並使用onClick事件偵聽器更新所有狀態。 但是現在我想我會遇到同樣的問題，因為obj變量的范圍沒有解決。

任何幫助將不勝感激。 我只做了幾個月，任何建議和反饋也將不勝感激！

Answer 1

您似乎在更新狀態時未正確使用動態鍵。 另外，您需要更新鍵中的值，而不要覆蓋它。 另外， obj不應是onChange的第二個參數，而必須從封閉范圍接收

const _renderObject= () => {
     return Object.keys(answers).map((obj, i) => {
        return(
            <div key={obj}>
                <label>{answers[obj].question}</label>
                <input type="text" onChange={(e) => setAnswer(
                    {
                    ...answers,
                   [obj]:{
                       ...answers[obj],
                       value: e.target.value
                    }})} />    
            </div>
        )
    })

Answer 2

onChange={(e, obj) => setAnswer(
                    {
                    ...answers,
                    obj:{
                       value: e.target.value
                    }})}

在這里，您可以分散答案並添加具有目標值的另一個對象。 這就是問題。 希望你理解這一點。

嘗試這個

 onChange={ (e, obj) => { const updatedAnswer = answer.map(ans => ans.question === obj.question ? {...ans,value: e.target.value }:ans) setAnswer( { ...updatedAnswer } ) } } 

BW您的對象應包含密鑰的屬性ID。

Answer 3

這是因為您沒有正確更新鍵，並且需要在輸入onchange回調中傳遞obj，因為它會提供另一個引用，而不是映射的array（obj）。 因此，在您的情況下obj是未定義的。 這是工作代碼：

const _renderObject = () => {
    return Object.keys(answers).map((obj, i) => {
      return (
        <div key={obj}>
          <label>{answers[obj].question}</label>
          <input
            type="text"
            onChange={e =>

              setAnswer({
                ...answers,
                [obj]: {   //take obj
                  ...answers[obj],//keep specific object question
                  value: e.target.value//change only specfic object value
                }
              })
            }

          />
        </div>
      );
    });
  };

這是工作網址： https : //codesandbox.io/s/hardcore-pike-s2hfx