如何在反应中处理异步状态更新

Question

我正在开发一个颜色生成器应用程序，我想做的是更新挂载状态。我知道更新状态是异步的，所以如果在我们等待 colourOne 被定义时加载为真，我有一个加载状态向用户显示“正在加载”，但是我一直收到这个错误。

如何等待 colourOne 的值被定义，这样我的 Card 组件就不会显示道具类型警告？通常，在 React 中显示加载状态和等待异步状态更新的最佳方式是什么。

index.js:1 Warning: Failed prop type: The prop `colour` is marked as required in `Card`, but its value is `null`

   const [loading, setLoading] = useState(false);
   const [colourOne, setColourOne] = useState(null)

   const generateColour = () => {
     return (
       "#" +
       Math.floor(Math.random() * 16777215)
         .toString(16)
         .padStart(6, "0")
     );
   };

   useEffect(() => {
     setLoading(true);
     setColourOne(generateColour());
     setLoading(false);
   }, []);

   if (loading) {
     console.log("is loading");
     return <p> Loading</p>;
   }
   return (
     <ThemeProvider theme={theme}>
       <div id="App">
         <Title>Colour Palette Generator</Title>
         <CardListWrapper>
           <Card colour={colourOne} />
         </CardListWrapper>
       </div>
     </ThemeProvider>
   );
 }

export const Card = ({ colour }) => {
  return (
    <CardWrapper>
      <GeneratedColour colour={colour} />
    </CardWrapper>
  );
};

Card.propTypes = {
  colour: PropTypes.string.isRequired,
};

Answer 1

错误很明显。你需要给 colour

一个 string 默认值

const [colourOne, setColourOne] = useState("someDefaultValue")

因为你给了一个规则，它必须是一个有效的字符串（NULL 不是）

colour: PropTypes.string.isRequired,

另一种选择是如果没有颜色则不渲染托盘

{colourOne && (<CardListWrapper>
           <Card colour={colourOne} />
         </CardListWrapper>)}

如何在反应中处理异步状态更新

How to handle async state updates in react

javascript

components

reactjs