Javascript 对原因作出反应

我正在使用简单的React组件来理解渲染发生的时间

-最初渲染一次。无论单击按钮的次数如何，它都不会渲染。这是意料之中的

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState([
    { id: 1, name: "test1" },
    { id: 2, name: "test2" }
  ]);
  const onClick = () => setState(data => data);
  console.log("App rendered");
  return (
    <div className="App">
      <h1>Test if setting same data causes re-rendering</h1>
      <button onClick={onClick}>Call setState with same data</button>
      {state.map(({ id, name }) => (
        <p key={id}>{name}</p>
      ))}
    </div>
  );
}

---

---

更新：确认是react的错误。-

示例1中只有“Hello CodeSandbox”，而且@artanik Updated中没有按钮需要消失（这没有帮助），但是
设置消息（messages=>messages）
没有意义。这只是设置已经存在的内容。即使是这个最小的示例也有相同的问题，看起来像是
useffect
的bug，因为没有
useffect
一切都很好
useCallback
和
useMemo
都没有帮助，您可以在另一个useEffect上更改
onClick
，其中包含setTimeout，并看到同样的问题也将
[消息]
传递到
useEffect
没有帮助
示例1
中只有“Hello CodeSandbox”，并且@artanik Updated没有按钮需要消失（这没有帮助），但是
setMessages（消息=>消息）
没有意义。这只是设置已经存在的内容。即使这个最小的示例也有相同的问题，看起来像是
useffect
的bug，因为没有
useffect
一切都很好
useCallback
和
usemo
都没有帮助，您可以使用setTim在另一个useffect上更改
onClick
从中取出，并看到同样的问题也将
[消息]
传递到
useffect
没有帮助
import React, { useState, useEffect, useMemo, useCallback } from "react";
import axios from "axios";
import "./styles.css";

const days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
export default function App() {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    axios
      .get(`https://api.myjson.com/bins/10xva4`)
      .then(({ data: { messages } }) => setMessages(messages));
  }, []);
  const Display = useMemo(
    () =>
      messages.map(({ content, senderUuid, sentAt }, index) => {
        let d = new Date(sentAt);
        return (
          <div className="container" key={index}>
            <p>Content: {content}</p>
            <p>SenderUuid: {senderUuid}</p>
            <p>DayOfTheWeek: {d.getDate()}</p>
            <p>Month: {d.getMonth()}</p>
            <p>Day: {days[d.getDay()]}</p>
            <p>Year: {d.getFullYear()}</p>
          </div>
        );
      }),
    [messages]
  );
  const onClick = useCallback(() => setMessages(messages => messages), []);
  console.log("App rendered");
  // console.log({ messages });
  return useMemo(
    () => (
      <div className="App">
        <button onClick={onClick}>Call setMessages with same data</button>
        {Display}
      </div>
    ),
    [Display, onClick]
  );
}