使用鈎子在嵌套對象中推送新數據的最佳方法是什么？

Question

我有一個按鈕，當它被觸發時會生成一個新的行數據。 這是我的代碼

這是我的 state：

const [myData, setMyData] = React.useState({  
  name: "",
  lastname: "",  
  config: [
    { weekday: "mon", hour: [], intervals: [] },
    { weekday: "tue", hour: [], intervals: [] },
    { weekday: "wed", hour: [], intervals: [] },
    { weekday: "thu", hour: [], intervals: [] },
    { weekday: "fri", hour: [], intervals: [] },
    { weekday: "sat", hour: [], intervals: [] },
    { weekday: "sun", hour: [], intervals: [] },
  ],
});

這是我的“html”：

{myData.config.map((item, dayKey) => {
  return (
    <div key={dayKey} className={s.day}>                  
      <MyNewLine intervals={item.intervals} />
      
      {/* ...Each click on button a new line is generated*/}
      <Button
        type="primary"          
        onClick={() => {
          addNewLine("intervals", dayKey);
        }}            
      >
        Add new line
      </Button>
    </div>
  )})}

我的新線路組件

interface IProps {  
  intervals: any[];
}

export function MyNewLine({ intervals }: IProps) {
  return (
    <div>
      {intervals.map((item, key) => {
        return (
          <div>            
            //... MY DATA            
          </div>
        )
      })}
    </div>
}

這就是魔法發生的地方：白色的key ，我可以訪問我想要的 object。 我想將我的newLine推送/加入/連接到intervals[] 。 我怎樣才能做到這一點？

function addNewLine(type: string, key: number) {
  if (type === "intervals") {
    const newLine = myData.config[key].intervals;

    newLine.push({
      start: "",
      end: "",
      minimumAdvanceMinutes: 0,
      minutes: 0,
    });
    
    /*Not works*/
    myData.config[key] = {
      ...myData.config[key],
       [type]: newLine,
    };
  }    
}

也許使用Object.assign()我可以做到，但是通過外部方式更改數組是一種非常糟糕的做法。 那么，如何使用鈎子將新數據推送到我的intervals[] ？

Answer 1

Config 不是一個數組，因此您不能通過鍵而是通過索引來訪問它。 要推送到第二個元素，您需要使用 setMyData：

const i = 1
const interval = 'interval'
setMyData(prev => {
  const config = [...prev.config]
  config.[i].intervals.push(interval)
  return {...prev, config}
})