javascript - 无类别 react 状态？

Question

我正在尝试使用react-boilerplate构建一个简单的应用程序，容器(基本 View )和组件不使用类来创建新组件，而是使用基本功能。通常，您向类添加构造函数或直接状态，因为没有类，我不知道在哪里添加状态定义。我在任何地方都没有添加构造函数或状态定义，您可以在哪里为此 View 的模式中添加简单的 react (无 redux)状态列表或构造函数？

容器示例

/*
 * HomePage
 *
 * This is the first thing users see of our App, at the '/' route
 */

import React, { useEffect, memo } from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';

import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import {
  makeSelectRepos,
  makeSelectLoading,
  makeSelectError,

} from 'containers/App/selectors';
import H2 from 'components/H2';
import ReposList from 'components/ReposList';
import AtPrefix from './AtPrefix';
import CenteredSection from './CenteredSection';
import Form from './Form';
import Input from './Input';
import Section from './Section';
import messages from './messages';
import { loadRepos } from '../App/actions';
import { changeUsername, setHomeVisible } from './actions';
import { makeSelectUsername, makeHomeVisible } from './selectors';
import reducer from './reducer';
import saga from './saga';
import NavBar from './NavBar';
import ButtonLink from './ButtonLink';

const key = 'home';

export function HomePage({
  username,
  loading,
  error,
  repos,
  onSubmitForm,
  onChangeUsername,
  homeVisible,
  makeHomeVisible,
  setHomeVisible
}) {
  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

  useEffect(() => {
    // When initial state username is not null, submit the form to load repos
    if (username && username.trim().length > 0) onSubmitForm();
  }, []);

  const reposListProps = {
    loading,
    error,
    repos,
  };

  return (
    <article>
      <Helmet>
        <title>title</title>
        <meta
          name="description"
          content=""
        />
      </Helmet>
      <NavBar>
        <ButtonLink to="/" onClick={makeHomeVisible}>
          <FormattedMessage {...messages.websites} />
        </ButtonLink>
        <ButtonLink to="/apps" >
          <FormattedMessage {...messages.apps} />
        </ButtonLink>
      </NavBar>
      <div className={`home ${this.state.visible === false ? 'hidden': ''}`}>
        <Section>
          <H2>
            <FormattedMessage {...messages.trymeHeader} />
          </H2>
          <Form onSubmit={onSubmitForm}>
            <label htmlFor="username">
              <FormattedMessage {...messages.trymeMessage} />
              <AtPrefix>
                <FormattedMessage {...messages.trymeAtPrefix} />
              </AtPrefix>
              <Input
                id="username"
                type="text"
                placeholder="mxstbr"
                value={username}
                onChange={onChangeUsername}
              />
            </label>
          </Form>
          <ReposList {...reposListProps} />
        </Section>
      </div>
    </article>
  );
}

HomePage.propTypes = {
  loading: PropTypes.bool,
  homeVisible: PropTypes.bool,
  error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
  repos: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
  onSubmitForm: PropTypes.func,
  username: PropTypes.string,
  onChangeUsername: PropTypes.func,
  makeHomeVisible: PropTypes.func,
};

const mapStateToProps = createStructuredSelector({
  repos: makeSelectRepos(),
  username: makeSelectUsername(),
  loading: makeSelectLoading(),
  error: makeSelectError(),
  homeVisible: makeHomeVisible(),
});

export function mapDispatchToProps(dispatch) {
  return {
    onChangeUsername: evt => dispatch(changeUsername(evt.target.value)),
    makeHomeVisible: evt => dispatch(setHomeVisible(evt.target.value)),
    onSubmitForm: evt => {
      if (evt !== undefined && evt.preventDefault) evt.preventDefault();
      dispatch(loadRepos());
    },
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

export default compose(
  withConnect,
  memo,
)(HomePage);

Answer 1

根据 React 文档，您可以使用 useState Hook 将数据保存到状态。没有“状态列表或构造函数”，但您可以简单地访问传入的 Prop ，并决定将它们保存到状态如果它们将被操纵 - 如果不坚持使用 Prop 。

Codesandbox Demo

基本示例:

function Child(props) {
  let [name, setName] = useState(props.data.name);

  function updateName () {
    setName('The Dude');
  }
   return (
    <div className="App">
     <h2>{name}</h2>
     <button onClick={updateName}>Update</button>
    </div>
  );
};

function App() {
  let [data, setData] = useState({name: 'dude'});
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Child data={data}/>
    </div>
  );
}