【问题标题】：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
如果能加点代码就更好理解了...
为了分析问题，您应该添加一些代码如何设置数组中的数据。

标签： javascript arrays reactjs react-native react-hooks

【解决方案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]
      })));
    });
}, []);

【讨论】：