Reactjs 需要一些关于React代码行为的启示吗

我有这组代码，基本上我要实现的是在编辑页面上选择的选项

//this one works
const [artData, setArtData] = useState([])
const [catID, setCatID] = useState('')
const [catTitle, setCatTitle] = useState('')
    
setTutorialData(response.data.art)
setCatID(response.data.art.category._id)
setCatTitle(response.data.art.category.title)  
  

    <select
      id="categoryid"
      className="form-control"
      name="category"
      onChange={handleChange}
    >
        {categoryData.map(option => (
             <option value={option._id} >{option.title}</option>
        ))}
        **<option selected value={catID}>{catTitle}</option>**
    </select>

你可以试试这个

 {categoryData?.map(option => (
         <option value={option._id} >{option.title}</option>
    ))}
<option selected value={artData?.category?._id}>
        {artData?.category?.title}
      </option>

{categoryData？.map（选项=>(
{option.title}
))}
{artData？.category？.title}

您可以试试这个

 {categoryData?.map(option => (
         <option value={option._id} >{option.title}</option>
    ))}
<option selected value={artData?.category?._id}>
        {artData?.category?.title}
      </option>

{categoryData？.map（选项=>(
{option.title}
))}
{artData？.category？.title}

您的

artData

状态对象形状似乎与GET请求返回的不匹配，您存储在状态中

从

看起来您的响应是一个对象，但您已将初始

artData

状态定义为一个数组

const [artData, setArtData] = useState([]);

因此，在获取数据之前的初始渲染中，

artData.category

将是未定义的，如果您试图进一步访问未定义的对象，将抛出错误

解决方案 提供更好的初始状态，这样就不会抛出错误

const [artData, setArtData] = useState({
  category: {},
});

这样定义了

artData.category

，并且尝试

artData.category.id

将只是未定义，不会抛出错误

---

或者，您可以继续使用将

id

和

title

拆分为各自状态的版本。

似乎您的

artData

状态对象形状与GET请求返回的不匹配，并且您存储在状态中

从

看起来您的响应是一个对象，但您已将初始

artData

状态定义为一个数组

const [artData, setArtData] = useState([]);

因此，在获取数据之前的初始渲染中，

artData.category

将是未定义的，如果您试图进一步访问未定义的对象，将抛出错误

解决方案 提供更好的初始状态，这样就不会抛出错误

const [artData, setArtData] = useState({
  category: {},
});

这样定义了

artData.category

，并且尝试

artData.category.id

将只是未定义，不会抛出错误

---

或者，您可以继续使用将

id

和

title

拆分为各自状态的版本。

artData

是一个数组，因此

artData.category

应该未定义，然后在尝试访问未定义的

\u id

时抛出错误。控制台日志应该同样失败。也许有什么东西正在改变您的状态对象，当您的控制台日志在浏览器中与之交互时，它就变得有效了。你能提供一个你正在运行的代码的更多示例，以及错误的再现步骤吗？@Drew Reese，你说得对，控制台日志同样会失败。我发布了错误的控制台日志代码。它应该是这个const response=wait Axios.get（process.env.REACT\u APP\u FETCH\u URL+

/api/art/editart/${id}

，{withCredentials:true}）setArtData（response.data.tutorial）console.log（response.data.art.category.\u id）console.log（response.data.art.category.title）。控制台日志没有打印该值。感谢您在问题中发布该代码，并包括响应对象输出是什么？

artData

是一个数组，因此

artData.category

应该是未定义的，然后在尝试访问未定义的

\u id

时抛出错误。控制台日志应该同样失败。也许有什么东西正在改变您的状态对象，当您的控制台日志在浏览器中与之交互时，它就变得有效了。你能提供一个你正在运行的代码的更多示例，以及错误的再现步骤吗？@Drew Reese，你说得对，控制台日志同样会失败。我发布了错误的控制台日志代码。它应该是这个const response=wait Axios.get（process.env.REACT\u APP\u FETCH\u URL+

/api/art/editart/${id}

，{withCredentials:true}）setArtData（response.data.tutorial）console.log（response.data.art.category.\u id）console.log（response.data.art.category.title）。控制台日志没有打印该值。谢谢你在你的问题中发布了代码，还包括了响应对象输出是什么？嗨，艾哈迈德，这是我第一次看到问号。这是什么意思？Thanks@Nat

？。

是一个允许简洁的空检查的函数，因此您不会访问未定义对象的属性。这是非常有用的，但在这种情况下，更多的是一个创可贴，并没有解决的原因，为什么价值/对象是未定义的。嗯，这被称为可选链接运算符，同ARTDATA一样？artData:未定义。但这是一个用Hirarch的方式获取属性的速记。例如，在您的代码中{categoryData？.map（）categoryData？.map表示categoryData？categoryData.map（）：未定义，所以它做两件事，检查值是否存在，以防它与您的代码冲突，否则它会为您处理错误的情况谢谢，我今天学到了很多。再次感谢，里斯和艾哈迈德。嗨，艾哈迈德，这是我第一次看到问号。这是什么意思？Thanks@Nat

？。

是允许简洁的空检查的o您不访问未定义对象的属性。它非常有用，但在这种情况下，更多的是一个创可贴，并且不解决为什么值/对象未定义的原因。你的代码{categoryData？.map（）categoryData？.map意味着categoryData？categoryData.map（）：未定义所以它做两件事，检查该值是否存在，以防它执行你的代码，否则它会为你处理错误的情况谢谢，我今天学到了很多。再次感谢，里斯和艾哈迈德。