相关疑难解决方法(0)

何时重要的props是super(),为什么？

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

我有以下组件，它接受一个渲染道具，它将值传递给子组件。 这是一个显示问题的代码沙盒。按提交并查看控制台。

这是组件：

export const FormContainer = function FormContainer<V>({
  initialValues,
  validate,
  render,
  ...rest
}: FormContainerProps<V>) {
  const [hasValidationError, setHasValidationError] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!hasValidationError) {
      return;
    }

    scrollToValidationError();

    () => setHasValidationError(false);
  }, [hasValidationError]);

  return (
    <>
      <Formik
      >
        {({
          isSubmitting,
          submitCount,
          isValid,
          errors,
          values,
        }: FormikProps<V>) => {
          const invalid = !isValid;
          const submitted = submitCount > 0;

          if (submitCount > 0 && invalid) {
            setHasValidationError(true);
          }

          return (
            <>
              <Form>
                  <div className={styles.form}> …

我已经看到了这个答案：useMemo vs. useEffect + useState，它总结起来很不错useEffect，但就我而言，我想执行一个昂贵的操作，该操作将尽早更改DOM。将useMemo()仍然被代替的建议useLayoutEffect()与状态更新？效果的双重渲染->状态更新会否提高性能？

编辑

useLayoutEffect() 场景：

useLayoutEffect(() => {
    const tokens = expensiveOperationGeneratingClasses(param1)
    setTokens(tokens)
}, 
[param1])

 render (
  <>
   {
       tokens.map(token => <span className={token.id}/>)
   }
  </>
 )

useMemo 场景：

const tokens = useMemo(() => {
     return expensiveOperationGeneratingClasses(param1)
},
[param1]

 render (
  <>
   {
       tokens.map(token => <span className={token.id}/>)
   }
  </>
 )

实际上，我意识到我不是在进行DOM操作，而是在呈现<span>标记之前生成类名以避免闪烁，所以我认为我最好使用useMemo，对吗？

我有这个简单的组件,将initialPlayersprops传递给App组件.

import React from 'react';
import ReactDOM from 'react-dom';

var PLAYERS = [
  {
    name: "xyz",
    score: 123
  }
];

// App component
class App extends React.Component {

 constructor() {
   super();
 }

 componentDidMount() {
   this.state = {
     players: this.props.initialPlayers
   }
 }

 render() {    
   return(
     <div>
       <Header players={this.state.players} />
     </div>
   );
 }
}

// Render component
ReactDOM.render(<App initialPlayers={ PLAYERS }/>, 
document.getElementById('root'));

在控制台中出现此错误,并且无法将值传递给Header组件{this.state.players}.任何的想法？.

Uncaught TypeError: Cannot read property 'players' of null
at App.render (bundle.js:14379) …

我是React钩子的新手，但我在文档中看不到这一点：

const MyComponent = ({myProp}) => {
 const [myPropHook, setPropHook] = useState(myProp)
...
}

我想知道这是否是一个好习惯？