Reactjs如何在状态数组对象中的每个益序上添加新字段

发布于 2025-02-05 20:02:30 字数 1992 浏览 1 评论 0原文

在我的ReactJS应用程序（使用功能组件和状态“挂钩”）中，我获取一个JSON文件并将其存储在该州，但我想在数组中添加一个具有相同值的新字段。我知道我必须创建一个新的可突变数组，但不确定如何循环循环并添加字段等。注意，我无法更改原始的JSON文件。

JSON DATA（示例）：

[
    {
        "id": 3565,
        "user_id": 3155,
        "course_id": 7,
        "type": "StudentEnrollment",
        "created_at": "2018-06-20T15:50:14Z",
        "updated_at": "2018-06-20T15:50:14Z",  
    },
    {
        "id": 15092,
        "user_id": 3155,
        "course_id": 25,
        "type": "StudentEnrollment",
        "created_at": "2020-08-25T14:23:43Z",
        "updated_at": "2020-08-25T14:23:43Z",       
    },
    {
        "id": 19112,
        "user_id": 3155,
        "course_id": 87,
        "type": "StudentEnrollment",
        "created_at": "2021-05-25T13:11:36Z",
        "updated_at": "2022-03-10T11:02:59Z",
        
    }
]

当前代码：

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => setTableData(data))                
        }

    }, [fetchUrl])

//todo...Add一个新字段，称为“ webhost'的新字段”，为状态对象中的每个记录提供值“指示”，以便新数据是...

[
    {
        "id": 3565,
        "user_id": 3155,
        "course_id": 7,
        "type": "StudentEnrollment",
        "created_at": "2018-06-20T15:50:14Z",
        "updated_at": "2018-06-20T15:50:14Z",  
        "webHost": "Instructure",
 },
    {
        "id": 15092,
        "user_id": 3155,
        "course_id": 25,
        "type": "StudentEnrollment",
        "created_at": "2020-08-25T14:23:43Z",
        "updated_at": "2020-08-25T14:23:43Z",       
        "webHost": "Instructure",
    },
    {
        "id": 19112,
        "user_id": 3155,
        "course_id": 87,
        "type": "StudentEnrollment",
        "created_at": "2021-05-25T13:11:36Z",
        "updated_at": "2022-03-10T11:02:59Z",
        "webHost": "Instructure",
    }
]

原文

In my ReactJs app (using functional components and state 'hooks') I fetch a Json file and store it in the state but I want to add a new field with the same value for EACH record in the array. I understand I have to create a new mutable array but not not sure how to loop through the array and add the field etc. Note, I cannot alter the original json file.

Json data (sample):

[
    {
        "id": 3565,
        "user_id": 3155,
        "course_id": 7,
        "type": "StudentEnrollment",
        "created_at": "2018-06-20T15:50:14Z",
        "updated_at": "2018-06-20T15:50:14Z",  
    },
    {
        "id": 15092,
        "user_id": 3155,
        "course_id": 25,
        "type": "StudentEnrollment",
        "created_at": "2020-08-25T14:23:43Z",
        "updated_at": "2020-08-25T14:23:43Z",       
    },
    {
        "id": 19112,
        "user_id": 3155,
        "course_id": 87,
        "type": "StudentEnrollment",
        "created_at": "2021-05-25T13:11:36Z",
        "updated_at": "2022-03-10T11:02:59Z",
        
    }
]

Current code:

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => setTableData(data))                
        }

    }, [fetchUrl])

//TODO...Add a new field called 'webHost' with value "Instructure" for each record in state object so new data would be...

[
    {
        "id": 3565,
        "user_id": 3155,
        "course_id": 7,
        "type": "StudentEnrollment",
        "created_at": "2018-06-20T15:50:14Z",
        "updated_at": "2018-06-20T15:50:14Z",  
        "webHost": "Instructure",
 },
    {
        "id": 15092,
        "user_id": 3155,
        "course_id": 25,
        "type": "StudentEnrollment",
        "created_at": "2020-08-25T14:23:43Z",
        "updated_at": "2020-08-25T14:23:43Z",       
        "webHost": "Instructure",
    },
    {
        "id": 19112,
        "user_id": 3155,
        "course_id": 87,
        "type": "StudentEnrollment",
        "created_at": "2021-05-25T13:11:36Z",
        "updated_at": "2022-03-10T11:02:59Z",
        "webHost": "Instructure",
    }
]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只是偏爱你 2025-02-12 20:02:30

为了在数组的每个对象中添加属性，您可以映射它添加属性并将新数组存储在状态：

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => {
                   const arr = data.map(obj => ({ ...obj, "webHost": "Instructure"}))
                   setTableData(arr);
                })                
        }
    }, [fetchUrl])

In order to add a property in each object of the array you can map it add the property and store the new array in the state:

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => {
                   const arr = data.map(obj => ({ ...obj, "webHost": "Instructure"}))
                   setTableData(arr);
                })                
        }
    }, [fetchUrl])

回复收藏 0 原文

只有一腔孤勇 2025-02-12 20:02:30

我会这样解决：

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => {
                  const withWebHost= data.map(record=>({...record,webHost:'Infrastructure'}))
                   setTableData(withWebHost)
           })                
        }

    }, [fetchUrl])

i would sort this out this way:

const [tableData, setTableData] = useState([])

useEffect(() => {
        if (fetchUrl) {
            fetch(fetchUrl)
                .then((data) => data.json())
                .then((data) => {
                  const withWebHost= data.map(record=>({...record,webHost:'Infrastructure'}))
                   setTableData(withWebHost)
           })                
        }

    }, [fetchUrl])

回复收藏 0 原文

~没有更多了~