问题

Question

我有一个对象，并且在对象 hava 数据数组内部。但我无法访问它。当我记录我的对象时，我可以像这样看到我的数据：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>
       
      )
    }

Answer 1

问题

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

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]
      })));
    });
}, []);

Answer 2

我认为问题出在这里：

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

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

>

有点像：

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);
  });
)

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

2 个答案:

问题

解决方案