Question

我正在尝试在React中实现分页，我有3个组件分页=> PageButtons => NumericBtns，我已经收集了通过上下文API从子级单击的页面的数据，但是当我第一次单击时没有任何反应，而第二次单击执行的是第一次单击的数据时，我发现红色是因为setState异步工作，并且一种直接获取点击数据的解决方案是使用第二个参数，但是例如我向控制台显示日志记录值，当我尝试放置一些会根据新页面值im更改其他状态参数的逻辑时出现错误超过最大更新深度，我也红色表示我应该使用componentDidUpdate生命周期方法，当我在其中记录当前页面值时，可以将正确的数据记录到控制台，但是当我尝试在其中实现逻辑时，我也遇到了同样的错误。我也不知道我是否正确地将lastNameDisplayed和firstNameDisplayed逻辑置于状态，因为它不会基于“当前”自动更新，实际上lastNameDisplayed是单击一次，而firstNameDisplayed是单击两次。我不明白我在做什么，我正在收到关于超出深度的错误，我不知道如何在单击后获取更新的current，lastNameDisplayed，firstNameDisplayed和正确的namesDisplay数组，这是我的主要分页组件，但是我已经做到了那里的许多事情对您来说可能毫无意义

import React from 'react';
import PageItem from './PageItem';
import PageButtons from './PageButtons';
import AppContext from './AppContext';

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      names: [
        'Peter Petrelli',
        'Claire Bennet',
        'Hiro Nakamura',
        'Nathan Petrelli',
        'Sylar',
        'Niki Sanders',
      ],
      initialNames: ['Peter Petrelli', 'Claire Bennet'],
      namesPerPage: 2,
      current: 1,
      lastNameDisplayed: this.current * this.namesPerPage,
      firstNameDisplayed: this.lastNameDisplayed - this.namesPerPage,
      namesDisplayed: [],
    };
  }

  defineCurrent = (clicked) => {
    this.setState({ current: clicked });
    this.setState({
      lastNameDisplayed: this.state.current * this.state.namesPerPage,
    });
    this.setState({
      firstNameDisplayed:
        this.state.lastNameDisplayed - this.state.namesPerPage,
    });
  };

  renderUpdate = () => {
    const lastNameDisplayed = this.state.current * this.state.namesPerPage;
    const firstNameDisplayed = lastNameDisplayed - this.state.namesPerPage;
    this.setState({
      namesDisplayed: this.state.names.slice(
        firstNameDisplayed,
        lastNameDisplayed
      ),
    });
  };

  componentDidUpdate() {
    console.log(`didupdate ${this.state.current}`);
    console.log(`didupdate ${this.state.lastNameDisplayed}`);
    console.log(`didupdate ${this.state.firstNameDisplayed}`);
    console.log(`didupdate ${this.state.namesDisplayed}`);
  }

  render() {
    let { names, initialNames, namesPerPage, namesDisplayed } = this.state;

    return (
      <AppContext.Provider value={{ defineCurrent: this.defineCurrent }}>
        <div className="w-full max-w-screen-xl mx-auto p-6">
          <div className="relative rounded overflow-hidden mb-8">
            <div className="p-4 bg-grey-lighter py-8">
              <div className="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
                <div className="sm:flex sm:items-center px-2 py-4">
                  <div className="flex-grow">
                    <h3 className="font-normal px-1 py-3 leading-tight font-bold border-b border-dashed">
                      Lista kontaktów
                    </h3>
                    <div className="w-full">
                      {namesDisplayed.length
                        ? namesDisplayed.map((name) => (
                            <PageItem name={name} key={name} />
                          ))
                        : initialNames.map((name) => (
                            <PageItem name={name} key={name} />
                          ))}
                    </div>
                  </div>
                </div>
                <div className="bg-grey-light px-2 py-4 flex justify-center">
                  <div className="pagination">
                    <PageButtons
                      namesPerPage={namesPerPage}
                      namesTotal={names.length}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </AppContext.Provider>
    );
  }
}

export default Page;

这是具有单击处理程序的第三个组件，由于使用上下文，因此我不会粘贴第二个，因此没有相关逻辑

import React from 'react';
import AppContext from './AppContext';

const NumericBtns = ({ pageNumber }) => {
  return (
    <AppContext.Consumer>
      {(context) => (
        <li className="relative block py-2 px-3 leading-tight bg-white border border-gray-300 text-blue-700 border-r-0 hover:bg-gray-200">
          <a
            onClick={() => context.defineCurrent(pageNumber)}
            className="page-link"
            href="#"
          >
            {pageNumber}
          </a>
        </li>
      )}
    </AppContext.Consumer>
  );
};

export default NumericBtns;

感谢百万帮助 K

从子组件获取数据后更新状态

0 个答案: