单击 React 更新列表

Question

地图功能的显示仅在输入更改时更新。谁能解释一下原因。

即使我使用 Effect 在堆栈更改时刷新页面。它不工作。只有输入字段更改正在更新显示。

import React, { useState, useEffect } from "react";

export default function App() {
  const [stack, setStack] = useState([]);
  const [values, setvalues] = useState("");

  useEffect(() => {
    console.log("Refeshed");
  }, [stack]);

  return (
    <div className="App">
      <div className="app-left">
        <input
          className="stack-input"
          placeholder="Element"
          value={values}
          onChange={(e) => {
            setvalues(e.target.value);
          }}
        />
        <button
          className="push-btn"
          onClick={() => {
            stack.push(values);
          }}
        >
          Push
        </button>
        <button
          className="pop-btn"
          onClick={() => {
            stack.pop();
          }}
        >
          Pop
        </button>
      </div>
      <ul className="app-right">
        {stack.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Answer 1

您需要在 click 上调用 setStack，并使用 prevState 更新值。使用 let useEffect 调用 setStack 以识别状态变化并将 re-render 组件

setStack(oldStack => [...oldStack, values]); // adding (.push)

弹出

setItems(oldStack => oldStack.slice(0, -1)); // removes last element

Answer 2

那是因为 React 在状态改变时使用浅层比较来决定是否重新渲染。您总是更新现有数组，避免重新渲染。您需要为每个操作（推送或弹出）创建一个新数组。

以下也可以

const { useEffect, useState } = React;

function App() {
  const [stack, setStack] = useState([]);
  const [values, setvalues] = useState("");

  useEffect(() => {
    // console.log("Refeshed");
  }, [stack]);

  const push = (value) => {
    setStack((prevStack) => [...prevStack, value]);
  };

  const pop = () => {
    setStack((prevStack) => prevStack.slice(0, prevStack.length - 1));
  };

  return (
    <div className="App">
      <div className="app-left">
        <input
          className="stack-input"
          placeholder="Element"
          value={values}
          onChange={(e) => {
            setvalues(e.target.value);
          }}
        />
        <button
          className="push-btn"
          onClick={() => {
            push(values);
          }}
        >
          Push
        </button>
        <button
          className="pop-btn"
          onClick={() => {
            pop();
          }}
        >
          Pop
        </button>
      </div>
      <ul className="app-right">
        {stack.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

单击 React 更新列表

Update List on Click React

javascript

arrays

render

reactjs