Fatal编程技术网
  • reactjs/
  • Reactjs 在对象的useState数组中存储JSX元素时出现问题

Reactjs 在对象的useState数组中存储JSX元素时出现问题

reactjs

Reactjs 在对象的useState数组中存储JSX元素时出现问题,reactjs,Reactjs,我正在尝试更改React组件，以便最终对其内容进行排序。为此，我将大多数渲染方法提取到一个对象数组中，例如 const [items, setItems] = useState([ {id : 1, item: <div id="SelectionEntryBuildNr">{buildNr}</div> }, {id : 2, item: <Timestamp id="Selection

我正在尝试更改React组件，以便最终对其内容进行排序。为此，我将大多数渲染方法提取到一个对象数组中，例如

const [items, setItems] = useState([        
        {id : 1, item: <div id="SelectionEntryBuildNr">{buildNr}</div> },
        {id : 2, item: <Timestamp id="SelectionEntryTimestamp" relative date={timestamp} /> }
]
它正确地呈现了所有内容，但是，在它以前显示数据的地方，它现在似乎没有显示任何数据（相对日期默认为“刚好当时”）。它似乎无法正确访问数据。 当我记录
项时，我会得到一个包含以下内容的数组：


0:
id: 0
item: {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
__proto__: Object



为什么JSX元素是这样存储的？为什么它不能访问状态变量？
JSX这样存储的原因是，归根结底，JSX只是
react.createElement（）
语法的语法糖，react将转换为具有正确参数的函数，以创建适当的react
元素。检查%20以了解这一点。所以本质上，JSX被编译成一个react元素并以该形式存储。在返回的对象中，可以检查
子对象使用的值，以便更好地了解传入的状态变量的情况


为了理解这可能不起作用的原因，可能是在设置状态变量之前编译JSX，或者可能只是无法在另一个状态变量中使用状态变量，或者可能是由于范围问题而找不到该变量。最有可能的是，
未定义的
被传递到元素的子元素中。
谢谢，似乎我必须稍微提高我的基础知识

0:
id: 0
item: {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}
__proto__: Object