为什么我的组件无法检测到道具变更？

Question

我觉得自己做对了吗？ 似乎很简单，我感觉自己缺少一些东西。 感谢任何帮助谢谢

function App() {
  let jsonData = "a saved page from the database";

  return (
    <div className="App">
      <button onClick={() => {
        jsonData = "a different saved page from the database";        
      }}>
        Change jsonData
      </button>
      <Touchscreen
        key={jsonData}  // something i tried but still doesn't work
        jsonData={jsonData}
      />
    </div>
  );
}

export const Touchscreen = (props) => {  
  React.useEffect(() => {    
    console.log('jsonData: ', props.jsonData);  // won't trigger
  }, [props.jsonData]);

  return (
    <div>
      <span>{props.jsonData}</span>  // never re-renders
    </div>
  );
}

Answer 1

该组件在每次重新渲染时都重新声明jsonData ，您无法在re-renders上保留更改。 如果您想在组件生命周期中保留某些东西，那么state就是它的地方

function App() {
  const [jsonData, setJsonData] = useState("a saved page from the database");

  return (
    <div className="App">
      <button onClick={() => {
        setJsonData("a different saved page from the database");        
      }}>
        Change jsonData
      </button>
    </div>
  );
}

Answer 2

您需要将jsonData作为组件状态的属性，然后使用setState更改值。 调用setState将导致组件重新呈现。

有关setState更多信息，请参阅docs 。