如何在 React 中读取和更改大 arr答案

【问题标题】：How to read and change big arr in React如何在 React 中读取和更改大 arr
【发布时间】：2022-08-15 12:29:35
【问题描述】：

我有一个包含另一个数组的状态。我需要获取此数组以将其作为列表返回。新项目应作为对象出现在应用程序数组中。我不太明白我做错了什么。我怎样才能解决这个问题？
** enter image description here

import React, { useState } from \'react\'

function App() {
  const [data, setData] = useState([
    {
        name: \'Ivan Pupkin\',
        email: \'ivan@gmail.com\',
        phone: \'+34452344323\',
        application: [
            {
                nameOfApp: \'Name of App\',
                type: \'It and business\',
                description: \'some description\', 
            },
        ],
    },
]) 
  const [name, setName] = useState(\'\');
  const [type, setType] = useState(\'\');
  const [description, setDescription] = useState(\'\');

  const addNewUser = (e) => {
    e.preventDefault()

    setData(current => current.map(item => [...item.application, {
      personalId: 4,
      nameOfApp: name,
      description: description,
      type: type
    }]))
  }
  const Users = data.map(item => item.application.map((elem, index) => {
      return(
        <div key={index}>
          <div>{elem.nameOfApp}</div>
          <div>{elem.type}</div>
          <div>{elem.description}</div>
        </div>
      )
  }))


  return (
    <div>
      <form action=\"#\">
        <input onChange={(e) => setName(e.target.value)} placeholder=\'name\'/>
        <input onChange={(e) => setType(e.target.value)} placeholder=\'type\'/>
        <input onChange={(e) => setDescription(e.target.value)} placeholder=\'desc\'/>
        <button onClick={addNewUser} type=\'submit\'>submit</button>
      </form>
      <br />
      <br />
      <br />
      {Users}
    </div>
  )
}

export default App

欢迎来到堆栈溢出！你的问题不清楚。请详细说明您要问什么。要了解有关此社区的更多信息以及我们如何为您提供帮助，请从 tour 开始并阅读 How to Ask 及其链接资源。
怎么改？要阅读它，您只需使用data 或打印它

标签： javascript reactjs

【解决方案1】：

我不确定我是否了解您要执行的操作，但这是一个工作版本：

基本上，我只是说我想在 addUser() 中编辑哪个用户，然后搜索它，为其分配新应用程序，并返回没有前一个用户的用户数组

如果我是你，我会避免使用没有 id 的对象/数组 :)

import React, { useState } from "react";

function App() {
  const [data, setData] = useState([
    {
      id: 1,
      name: "Ivan Pupkin",
      email: "ivan@gmail.com",
      phone: "+34452344323",
      application: [
        {
          id: 1,
          nameOfApp: "Name of App",
          type: "It and business",
          description: "some description"
        }
      ]
    }
  ]);
  const [name, setName] = useState("");
  const [type, setType] = useState("");
  const [description, setDescription] = useState("");

  const addNewUser = (e, targetUserId) => {
    e.preventDefault();

    setData((prevUsers) => {
      const editedUser = prevUsers.find(({ id }) => id === targetUserId);
      editedUser.application.push({
        nameOfApp: name,
        type: type,
        description: description
      });
      const newUsers = [
        ...prevUsers.filter(({ id }) => id !== targetUserId),
        editedUser
      ];
      return newUsers;
    });
  };
  const Users = data.map((item) =>
    item.application.map((elem, index) => {
      return (
        <div key={index}>
          <div>{elem.nameOfApp}</div>
          <div>{elem.type}</div>
          <div>{elem.description}</div>
        </div>
      );
    })
  );

  return (
    <div>
      <form action="#">
        <input onChange={(e) => setName(e.target.value)} placeholder="name" />
        <input onChange={(e) => setType(e.target.value)} placeholder="type" />
        <input
          onChange={(e) => setDescription(e.target.value)}
          placeholder="desc"
        />
        <button onClick={(e) => addNewUser(e, 1)} type="submit">
          submit
        </button>
      </form>
      <br />
      <br />
      <br />
      {Users}
    </div>
  );
}

export default App;

希望对你有帮助！

【讨论】：