bugfix> javascript > 投稿

私はオブジェクトの配列を持っています:

// seedColors.js
export default [
  {
    paletteName: "Material UI Colors",
    colors: [
      { name: "red", color: "#F44336" },
      { name: "pink", color: "#E91E63" },
    ]
  },
  {
    paletteName: "Flat UI Colors v1",
    colors: [
      { name: "Turquoise", color: "#1abc9c" },
      { name: "Emerald", color: "#2ecc71" },
    ]
  }
]

app.jsファイルで、オブジェクトの新しい配列を作成していますが、useStateフックを使用して新しいオブジェクトを既存のオブジェクトに追加するにはどうすればよいですか?

// app.js
import seedColors from "./seedColors";
function App() {
  const [palettes, setPalettes] = useState({ palettes: seedColors });
  const savePalette = (newPalette) => {
    // newPalette = { paletteName: "New Test Palette", colors: [{ color: "blue", name: "blue" }] };
    setPalettes({ ...palettes, palettes: newPalettes });
  };

これは元のオブジェクトの状態を更新するのではなく、アプリケーションをクラッシュさせます

状態を次のように更新したいと思います。

[
  {
    paletteName: "Material UI Colors",
    colors: [
      { name: "red", color: "#F44336" },
      { name: "pink", color: "#E91E63" },
    ]
  },
  {
    paletteName: "Flat UI Colors v1",
    colors: [
      { name: "Turquoise", color: "#1abc9c" },
      { name: "Emerald", color: "#2ecc71" },
    ]
  },
  { 
    paletteName: "New Test Palette", 
    colors: [
      { color: "blue", name: "blue" },
    ] 
  },
]

回答 2 件
  • タイプミスがあるため、アプリケーションが「クラッシュ」している可能性があります。

    setPalettes({ ...palettes, palettes: newPalettes });
     //                                             ^
    
    

    名前の付いた変数がありません newPalettes 。しかし、それを修正しても、期待する結果は得られません。

    状態を単一のプロパティを持つオブジェクトに設定する理由はありますか?そうでない場合は、配列を直接割り当てます(これは、状態をどのように見せたいかについての説明に基づいて、必要なもののようです)。

    const [palettes, setPalettes] = useState(seedColors);
    
    

    次に、次のように配列を更新できます

    setPalettes([...palettes, newPalette]);
    
    

    そのオブジェクトが必要な場合は、次のようになります。

    setPalettes({...palettes, palettes: [...palettes.palettes, newPalette]});
    
    

  • あなたは宣言しました const [palettes, setPalettes] = useState({ palettes: seedColors });
    しかし、あなたは名前を付けて保存しようとします setPalettes({ ...palettes, palettes: newPalettes });

    それらをオブジェクトとして保存することをお勧めします。

    const [palettes, setPalettes] = useState(seedColors);
    setPalettes({ ...palettes, newPalettes });`
    
    

あなたの答え