如何使用 useState 更新 initstate 的值数组？答案

【问题标题】：How to update initstate's value's array using useState?如何使用 useState 更新 initstate 的值数组？
【发布时间】：2021-11-09 16:05:24
【问题描述】：

我想在从数据库中获取类别后更新类别数组的值/插入类别 json 数据。但是找不到正确的方法？注意：请检查 loadCategories 函数。

import React, {useEffect, useState} from "react";
import {getCategories} from "../../../Functions/Categoy";

const initialState = {
    title:"",
    desc:"",
    colors:["Black", "Brown", "Silver", "White", "Blue"],
    categories:[] // here to insert
}

const CreateProducts = () => {

    const [data, setData] = useState([initialState]);

    const { title, desc, colors, categories } = data
  
    useEffect(() => {
        loadCategories();
    }, [])
  
    const loadCategories = () => {
        getCategories()
                .then((res) => {
                    // here I want to insert/update categories value
                    // setData({ prevState =>  [...prevState, categories : res.data] })
                })
    };

    return (
          <div>{JSON.stringify(categories)}</div>
)}

export default CreateProducts;

【问题讨论】：

状态最终会保存其他任何东西，还是只是一个类别数组？
@Andy 是的。我编辑了这些部分，请检查一下。
状态好像只指一种产品，对吗？一种产品有很多类别。
是的，我正在创建动态表单。实际上，我正在寻找负载类别中的解决方案，我在 setData 中更新类别。
我会选择@Andy 的解决方案，因为这似乎是正确的，我也建议这样做，但我不确定你为什么认为它不起作用。如果“创建动态表单”与您的问题/问题相关，并且您不需要像您在帖子中询问的那样简单地更新嵌套的 categories 数组，那么请更新您的问题以包含所有必要和相关的代码和上下文/您尝试解决的实际问题的详细信息。

标签： javascript node.js reactjs react-hooks use-state

【解决方案1】：

“Categoy”可能是一个错字？它应该是“类别”。
无需将数组中的initialState 添加到useState。
async/await 在处理fetch 返回的数据时让生活变得不那么复杂。您可以向useEffect 添加一个异步函数，并让它获取您的数据、解析它，然后更新您的组件状态。
然后您可以map 覆盖状态中的类别（或任何您想做的）来生成您的 JSX。

一个更新的例子。

import React, {useEffect, useState} from 'react';
import {getCategories} from '../../../Functions/Category';

const initialState = {
    title: '',
    desc: '',
    colors: ['Black', 'Brown', 'Silver', 'White', 'Blue'],
    categories: []
};

function CreateProducts() {

  const [data, setData] = useState(initialState);

  useEffect(() => {
    async function loadCategories() {
      const res = await getCategories();
      const categories = await res.json();
      setCategories({ ...data, categories });
    }
    loadCategories();
  }, [])

  return (
    <div>
      {data.categories.map(category => <div>{category}</div>)}
    </div>
  );

}

export default CreateProducts;

【讨论】：

我明白你的意思，但我正在创建动态表单。所以我做了const [data, setData] = useState([initialState]); 并想更新 loadCategories 函数中的类别。像这样setData( [...data, categories : res.data] )
在这种情况下lift state up。让父组件处理状态，并让它传递“哑”组件所需的所有数据以及更新该状态的处理程序。

【解决方案2】：

试试这个

import React, {useEffect, useState} from "react";
import {getCategories} from "../../../Functions/Categoy";

const initialState = []

const CreateProducts = () => {

    const [data, setData] = useState(initialState);

    useEffect(() => {
        loadCategories();
    }, [])

    const loadCategories = () => {
        getCategories()
            .then((res) => {
                 setData([...data,...res.data])
            })
      };

      return (
           <div>{JSON.stringify(data)}</div>
      )}

export default CreateProducts;

【讨论】：

您没有在任何地方解析 JSON。
请再次检查我的代码。实际上，initialState 有更多的价值。