1

我正在构建一个应用程序，我从我的 Nodejs 应用程序中获得“投诉”。然后我将这些投诉作为道具传递给子组件。在子组件中，我将这些道具设置为ComponentDidMount(). 但是render()函数首先被调用，所以它不会在屏幕上显示任何内容。状态不是立即设置的。请帮忙。我从2天开始挣扎。

这是父组件

class Complainer extends Component {
  state = {
    complaints: []
  };

  async componentDidMount() {
    try {
      const user = auth.getCurrentUser();
      console.log(user);
      this.setState({ user });
      if (!user || user.role !== 'complainer') this.props.history.replace('/');
    } catch (ex) {
      window.location = '/login';
    }

    const { data: complaints } = await getComplaints();
    this.setState({ complaints });
  }

  render() {
    const { complaints } = this.state;
    return (
      <React.Fragment>
        <Navbar user={this.state.user} />
        <div className="container">
          <Switch>
            <Route
              path="/complainer/view-all"
              render={props => (
                <AllComplaints complaints={complaints} {...props} />
              )}
            />
            <Route path="/complainer/new-complaint" component={ComplaintForm} />
            <Route path="/complainer/not-found" component={notfound} />
            <Showcase user={this.state.user} />
          </Switch>
          <hr />
        </div>
      </React.Fragment>
    );
  }
}

export default Complainer;

这是孩子

class AllComplaints extends Component {
  state = {
    data: {
      columns: [
        {
          label: 'location',
          field: 'location',
          sort: 'asc',
          width: 280
        },
        {
          label: 'Title',
          field: 'title',
          sort: 'asc',
          width: 150
        }
      ],

      rows: []
    }
  };

  componentDidMount() {
    const { complaints } = this.props;
    this.setState({ rows: complaints });
  }

  render() {
    const { data } = this.state;
    return (
      <React.Fragment>
        {data.rows && <MDBDataTable striped bordered small data={data} />}
        {!data.rows && <h1>There is no complaints to show</h1>}
      </React.Fragment>
    );
  }
}

export default AllComplaints;

问题是，与状态一样，行是空的.ie []。在componentDidMount()我将即将到来的道具设置为这个“AllComplaints”组件的状态。

我想将“props”值设置为“this.state.data.rows”。但这并没有发生。设置需要时间，但render()首先调用它，因此它不会在屏幕上显示任何内容。

请帮忙。

4

3 回答 3

2

似乎您没有设置this.state.data.rows但this.state.rows使用this.state.data.rows内部渲染

于 2019-04-11T13:00:23.727 回答
1

两件事情：

正如@karahan 提到的，你没有正确设置你的状态。

this.setState({ rows: complaints });

应该是这样的：

this.setState(prevState => { data: { ...prevState.data, rows: complaints } });

然而，这可能还不够。您正在componentDidMount从父级中检索数据，并在componentDidMount子级中设置您的状态。但是，componentDidMount如果同时安装子项，则始终先运行子项，并且只运行一次。这意味着通过您的设置，您孩子props.complaints的componentDidMount.

我会通过不在您孩子的组件中使用状态来解决这个问题。很少有充分的理由在多个组件中存储相同的状态（在这种情况下，您在父级和子级中存储相同的内容）。只需使用您的道具，它在您的渲染功能中始终是最新的。您的渲染MDBDataTable应该看起来像这样：

<MDBDataTable striped bordered small data={{ ...this.state.data, rows: this.props.complaints }} />

如果您complaints出于某种原因绝对必须存储在孩子的状态中，您应该取而代之的是获取孩子中的数据，或者查看getDerivedStateFromPropsand componentDidUpdate。但是，您不太可能需要这样的设置。

于 2019-04-11T14:04:01.920 回答
0

如果您想在渲染功能期间使用抱怨，您需要在您的状态本身中初始化它。

您需要为您的类编写构造函数，该构造函数接受来自父组件的道具并使用它来定义行的初始状态。

class AllComplaints extends Component {

    constructor(props) {
        super(props);
        this.state  = {
            data: {
              columns: [
                {
                  label: 'location',
                  field: 'location',
                  sort: 'asc',
                  width: 280
                },
                {
                  label: 'Title',
                  field: 'title',
                  sort: 'asc',
                  width: 150
                }
              ],

              rows: props.complaints
            }
          };
        }
          componentDidMount() {
//commeting below lines as you do not need them as of now.
            //const { complaints } = this.props;
            //this.setState({ rows: complaints });
          }

          render() {
            const { data } = this.state;
            return (
              <React.Fragment>
                {data.rows && <MDBDataTable striped bordered small data={data} />}
                {!data.rows && <h1>There is no complaints to show</h1>}
              </React.Fragment>
            );
          }
        }

        export default AllComplaints;
于 2019-04-11T12:02:50.160 回答