如何访问对象内部的数组？

Posted 2023-02-22

【中文标题】如何访问对象内部的数组？

【英文标题】：How can i access my array inside of object?

【发布时间】：2021-08-25 00:34:13

【问题描述】：

我有一个对象，对象内部有一个数据数组。但我无法访问它。当我记录我的对象时，我可以在里面看到我的数据：https://ibb.co/mJfHnhq

但是当我尝试像 objectname.data 这样写时，它会显示空数组，例如：https://ibb.co/yNSDb94 我如何调用它来访问我的数据。我需要将它发送到组件，但是当我发送 objectname.data 时它发送空数组。谢谢回复！

我如何填充我的对象数据：

const [myData,setMyData]=useState(DropdownElements); //Dropdown elements holds my url title empty array data for fill  etc.
const [myDatax,setMyDatax]=useState([]);

useEffect(() => 
  myData.map((x, i) => 
      fetch(x.apiUrl)
      .then((z) => z.json())
      .then((result) => 
         myData[i].data = result;
         setMyData(myData);
       );
    );
, []);

这是我尝试使用它的地方，但是当我写 x.data 时我看不到我的数据

return (
    <div>
           
           myData.map(x=>
             console.log('MYDATA',x.data)
             
          
            
             return (
               <MySpecialPicker
               key=x.key
               placeholder=x.placeholder
               onChange=change=>onchange(change)
               datasource=x.data
               >
    
    
               </MySpecialPicker>
             )
           )
        </div>
       
      )
    

【问题讨论】：

我认为是因为同步问题。

@decpk 对不起兄弟我问因为我不知道。如何在没有图像的情况下显示我的日志？

可能相关：Why is my variable unaltered after I modify it inside of a function

如果能加点代码就更好理解了...

为了分析问题，您应该添加一些代码如何设置数组中的数据。

【参考方案1】：

我认为问题出在这里：

useEffect(() => 
  myData.map((x, i) => 
      fetch(x.apiUrl)
      .then((z) => z.json())
      .then((result) => 
         myData[i].data = result;
         setMyData(myData);
       );
    );
, []);

在我看来，你找不到数据是正常的，因为那些是你在获得承诺值之前返回一个值的承诺，我建议你使用 ES6 或更高版本，async / await 更容易。

有点像：

await Promise.all(
  myData.map(async(x, i) => 
    const z = await fetch(x.apiUrl);

    const result = z.json(); // this is to be checked

    myData[i].data = result;
    setMyData(myData);
  );
)

【讨论】：

感谢兄弟的回复，但是在使用效果中我可以使用异步等待还是什么？我应该在哪里使用它

我已经更新了代码，以便您更好地看到它的样子。

谢谢！但它仍然是同一个兄弟。我还是看不到。你的代码给了我承诺，但我在我的代码上使用了异步等待，但仍然是同样的问题

有必要根据您的代码调整我的示例，因为我不完全了解所有代码。但通常async/await 应该解决这个问题，因为它确实是异步的，以及synchronous。

Array.prototype.map 回调应该是同步的。 fetch 返回一个 Promise，promise 链将在同步回调函数中工作。即使async 回调有效，您仍然会遇到状态突变和更新踩踏任何先前状态更新的问题。

【参考方案2】：

问题

你正在改变你的状态对象。当您使用非功能更新在循环中将一堆状态更新排入队列时，它们都使用渲染周期中更新被排入队列的状态，而不是任何先前更新状态的值。

useEffect(() => 
  myData.map((x, i) => 
      fetch(x.apiUrl)
      .then((z) => z.json())
      .then((result) => 
         myData[i].data = result; // <-- mutation, myData state from previous render
         setMyData(myData);
       );
    );
, []);

解决方案

使用功能状态更新来正确更新之前的状态，而不是效果运行时在回调范围内关闭的状态。使用.forEach，因为您正在发出副作用来获取数据，而不是映射到新数组（刚刚）。

useEffect(() => 
  myData.forEach((x, i) => 
      fetch(x.apiUrl)
      .then((z) => z.json())
      .then((result) => 
         setMyData(myData => myData.map((el, index) => index === i 
           ...el,
           data: result,
          : el));
       );
    );
, []);

或者映射一组获取请求和 Promise.all 并更新一次状态。

useEffect(() => 
  Promise.all(myData.map(x => fetch(x.apiUrl).then((z) => z.json())))
    .then(data => 
      setMyData(myData => myData.map((el, i) => (
        ...el,
        data: data[i]
      )));
    );
, []);