Question

我正在构建一个应用程序，可以从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;

问题在于，与状态一样，行为空。 []。在componentDidMount()中，我将即将出现的道具设置为“ AllComplaints”组件的状态。

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

请帮助。

Answer 1

似乎您未设置this.state.data.rows，而是设置了this.state.rows，并在渲染器内部使用了this.state.data.rows

Answer 2

如果要在渲染功能期间使用抱怨，则需要在状态本身中对其进行初始化。

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

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;

Answer 3

两件事：

如@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，则应该获取子项中的数据，或者查看getDerivedStateFromProps和componentDidUpdate。但是，您不太可能需要这样的设置。

从父母传递给孩子的道具并将这些道具设置为状态不会立即生效

3 个答案: