Question

我正在使用react和redux并从我的组件生命周期钩子componentDidMount调用异步操作。 this.props.user 由服务器调用更新。我用默认值初始化。

问题出在第1行，即第一次打印控制台日志

对象{名称：“测试”} ，第二次打印
对象{user：Array [30]，名称：“测试”}

为什么this.props首次出现时没有默认的用户数组属性？

    import React from 'react';
    import ChildComponent from './ChildComponent';
    import { fetchUsers } from "./fetchGithubUser"
    import { connect } from "react-redux"

    const styles = {
      fontFamily: 'sans-serif',
      textAlign: 'center',
      color:'green',
    };

    @connect((store) => {
      return {
        user: store.users,
      };
    })
    class App extends React.Component{

      componentDidMount() {
        this.props.dispatch(fetchUsers())
      }
      render(){

        console.log(this.props) // line 1

        return(
          <div style={styles}>
            <p> Hello World </p>
            <ChildComponent />
          </div>
        );
      }
    }
    App.defaultProps = {
      user: [1, 2, 3, 4, 5],
      name: 'Test'
    }
    export default App;

Answer 1

在user功能中，您传入来自商店的return { user: store.users || [1, 2, 3, 4, 5], };道具，这将覆盖默认道具。你可以做到

Dim MyRange As Range
Dim iCounter As Long

Set MyRange = ActiveSheet.UsedRange
For iCounter = MyRange.Rows.Count To 1 Step -1
   If Application.CountA(Rows(iCounter).EntireRow) = 0 Then
   Rows(iCounter).EntireRow.Hidden = True
   End If
Next iCounter

或者您可以使用虚假用户数据预先填充您的redux商店。

Answer 2

因此，如果您希望将默认道具传递给使用连接装饰器通过商店连接的组件，您可以将默认道具定义为类的静态成员

@connect((store) => {
  return {
    user: store.users,
  };
})
class App extends React.Component{
  static defaultProps = {
     user: [1, 2, 3, 4, 5],
     name: 'Test'
  }
  componentDidMount() {
    this.props.dispatch(fetchUsers())
  }
  render(){

    console.log(this.props) // line 1

    return(
      <div style={styles}>
        <p> Hello World </p>
        <ChildComponent />
      </div>
    );
  }
}
export default App;

处理此问题的另一种方法是使用reducer

定义初始状态

const InitialState = {
   user: [1, 2, 3, 4, 5],
   name: 'Test'
}
const myReducer = (state = InitialState, action) => {}

第一次渲染ReactJS时，默认道具不可用

2 个答案: