无法使用axios调用获取对象中的数组

Question

见下面的代码：

//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)，FYI直接将数据存储到状态变量中，res.data是一个具有某些属性的对象，以及表单输入字段名的数组。因此，当我试图编写时，gotData.formInputFields.map()，我得到一个错误，它说不能读取属性，映射为未定义的。但是，当我设置setData(res.data.formInputFields)，，然后调用gotData.map()，时，问题是解决了。但是，我不想使用两个单独的useStates来存储表单输入字段数据和可能需要的其他信息。我只想用gotData.formInputFields.map().调用( setData(res.data) )请帮帮忙。

Answer 1

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

记住，一旦对AJAX调用有了响应，就会有gotData上的数据，这将比第一次呈现花费更多的时间。

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

Answer 2

使用可选链

gotData.formInputFields?.map(...)

这将首先检查属性formInputFields是否存在于gotData中，然后调用map方法。