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放置为组件 state 的属性，然后使用setState来更改值。调用setState将导致组件重新呈现。

有关setState的更多信息，请查看docs。

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

2 个答案: