如何在 JavaScript/React 上向现有对象添加属性答案

【问题标题】：How to add property to existing object on JavaScript/React如何在 JavaScript/React 上向现有对象添加属性
【发布时间】：2021-06-12 09:15:42
【问题描述】：

我正在从 API 获取数据，我想向我的对象添加属性。我目前正在添加图像属性，但我需要在对象内部更深地添加这一层。

你能告诉我如何实现吗？

我一直坚持这一刻：

我的代码：

const Review = () => {
  const url = "https://jsonplaceholder.typicode.com/users";

  const [people, setPeople] = useState(null);

  const fetchPeople = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();

      let test = Object.entries(data).map((people) => ({
        ...people,
        image: "image url goes here",
      }));
      setPeople(test);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    fetchPeople();
    console.log(people);
  }, []);

【问题讨论】：

标签： javascript reactjs object

【解决方案1】：

Object.entries 返回一个数组 [index, value] 。您只需将图像属性添加到作为对象的值。

fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json()).then(data => {
  const newData = Object.entries(data).map(people => {
    people[1].image = "some image here"
    return people;
  });
  console.log(newData);
});

【讨论】：

@adiga 在这里使用 map 因为 forEach 不返回数组。这实际上取决于用例。在这里，OP 想在 setState 中使用该数组（数组的数组），这就是使用 map 的原因。

【解决方案2】：

使用 object.entries 是个坏主意 :D 我的问题的解决方案是：

  const fetchPeople = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      const peopleWithImages = data.map((person, index) => {
        return {
          ...person,
          image: `https://robohash.org/?set=set${index + 1}`,
        };
      });

      setPeople(peopleWithImages);
    } catch (error) {
      console.error(error);
    }
  };

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

【讨论】：