Reactjs 更新带有useEffect“每次重新提交后丢失”问题的JSX变量

我一直在尝试根据具体情况添加可选的JSX，因此我将它们初始化为null，并在适当的时候更新它们，以便它们包含JSX

//initialize potentially unused parts
let monitor = null;
let keyboard = null;

...

稍后在我的JSX中，我使用这些来仅显示存在的信息

{monitor}
{keyboard}

我做了一些研究，发现我的状态没有更新，因为useState是异步的，所以我设置了useEffect挂钩，试图在状态最终更新时更新这些变量

const [monitorState, setMonitorState] = useState(0);
const [keyboardState, setKeyboardState] = useState(0);

useEffect(() => {
    monitor = (
        <li>
            <span className="bold">Monitor: </span>
            {monitorState.title}}
            <span className="right">${monitorState.price}</span>
        </li>
    );
}, [monitorState]);

const handler = (item) => {
    if (item.type === "monitor") {
        setMonitorState(item);
    }
    ...
}

在模式组件中单击“添加”按钮时调用此处理程序：

<a
   onClick={() => props.handler(item)}
   href="#!"
   className="modal-close btn waves-light waves-effect grey darken-3 
   white-text modal-item-add">
   Add
</a>

但是，我得到一个错误：

每次渲染后，从React Hook useEffect内部分配给“monitor”变量的指定将丢失。要随时间保留该值，请将其存储在useRef挂钩中，并将可变值保留在“.current”属性中。否则，可以直接在useEffect内移动此变量

---

我很困惑useRef究竟将如何解决这个问题，甚至在这个问题上如何实现它。我看过其他线程，但没有一个线程更新过JSX变量。

每次函数组件重新加载时，底层代码都会再次调用该函数。在这个重新渲染器中，除了状态和引用之外，函数中的所有变量都将重新初始化，因为它们由React单独存储

根据建议，让我们看看如何使用参考文献纠正此问题：

const monitorRef = useRef(null);

useEffect(() => {
    monitorRef.current = (
        <li>
            <span className="bold">Monitor: </span>
            {monitorState.title}}
            <span className="right">${monitorState.price}</span>
        </li>
    );
}, [monitorState]);

return (
  <div>{monitorRef.current}</div>
)

---

每次函数组件重新加载时，底层代码都会再次调用该函数。在这个重新渲染器中，除了状态和引用之外，函数中的所有变量都将重新初始化，因为它们由React单独存储

根据建议，让我们看看如何使用参考文献纠正此问题：

const monitorRef = useRef(null);

useEffect(() => {
    monitorRef.current = (
        <li>
            <span className="bold">Monitor: </span>
            {monitorState.title}}
            <span className="right">${monitorState.price}</span>
        </li>
    );
}, [monitorState]);

return (
  <div>{monitorRef.current}</div>
)

可以将useRef视为一个可变对象，它在每次渲染时都会记住其值。其值始终存储在当前属性中。因此，您可以通过以下方式解决问题：

const monitor=useRefnull 在你的使用效果中： monitor.current=

以上是使用useRef解决问题的一种方法，但我发现它有点令人困惑。我认为使用javascript的&&操作符很容易解决这个问题

在JSX中，简单地说：

{monitorState？.title&&monitorState？.price&& ... } 当然，如果您想真正准确，您可以检查title和price是否也未定义，因为它们可以分别为空字符串和0

您可以将useRef视为一个可变对象，它在每次渲染时都会记住其值。其值始终存储在当前属性中。因此，您可以通过以下方式解决问题：

const monitor=useRefnull 在你的使用效果中： monitor.current=

以上是使用useRef解决问题的一种方法，但我发现它有点令人困惑。我认为使用javascript的&&操作符很容易解决这个问题

在JSX中，简单地说：

{monitorState？.title&&monitorState？.price&& ... }

---

当然，如果您想真正准确，您可以检查title和price是否也未定义，因为它们可以分别为空字符串和0

你能发布更多的代码吗？你能发布更多的代码吗？