无法使用 axios 调用在对象中获取数组答案

【问题标题】：Cannot fetch an array within an object with axios call无法使用 axios 调用在对象中获取数组
【发布时间】：2021-06-15 11:45:00
【问题描述】：

请看下面的代码：

//useState to store the file data:
const [gotData, setData] = useState({});

useEffect(() => {
    //calling the file's data. 
    instance(`/${filename.replace(" ", "%20")}`)
    .then(res => setData(res.data))
    .catch(err => console.log(err));
},[filename]);

return(
    <div className="__te_onlineBanking__Form">
        <form>
            {gotData.formInputFields.map(elem => {return(
            <span>
                <label htmlFor= {elem.id}>{elem.labelText}</label>
                <input type= {elem.inputType} required id = {elem.id} placeholder = {elem.placeholder} name = {elem.name}/>
            </span>)
            })}
        </form>
        {console.log(gotData.formInputFields)}
        <button onClick = {close}>Submit</button>
    </div>
)

地图功能出现问题。现在在上面的代码中，我使用 setData(res.data) 将数据直接存储到状态变量中，仅供参考，res.data 是一个具有一些属性的对象和一个用于表单输入的数组字段名称。因此，当我尝试编写 gotData.formInputFields.map() 时，我收到一条错误消息，提示无法读取属性，未定义的映射。但是当我设置setData(res.data.formInputFields)，然后调用gotData.map()，问题解决了。但是，我不想使用两个单独的 useStates 来存储表单输入字段数据和我可能需要的其他信息。 我只想 setData(res.data) 并使用 gotData.formInputFields.map() 调用地图。请帮忙。

【问题讨论】：

标签： javascript reactjs api axios react-hooks

【解决方案1】：

如果我不困惑，你的问题是gotData是一个对象或JSON，所以第一次迭代是gotData.formInputFields.map但formInputFields不存在，因为你写了useState({})所以初始状态是@ 987654325@.

请记住，一旦您的 AJAX 调用得到响应，您将在 gotData 上获得数据，这将比第一次渲染花费更多时间。

我建议您写信 useState({ formInputFields: [] }) 或将您的退货从 {gotData.formInputFields.map(elem => {return( 更改为 {gotData?.formInputFields?.map(elem => {return( 或 {gotData && gotData.formInputFields && gotData.formInputFields.map(elem => {return(

【讨论】：

非常感谢。完全解决了我的问题，我从来不知道那个var？是一件事。今天学到了一个新东西。再次感谢。
很高兴这解决了您的问题。使用?. 称为可选链，是JS 中的“新”事物

【解决方案2】：

使用Optional Chaining

gotData.formInputFields?.map(...)

这将在调用map 方法之前首先检查gotData 中是否存在属性formInputFields

【讨论】：