使用带有回调函数的 Hooks 将 <Class Component> 转换为 <Stateless Functional Component>答案

【问题标题】：Convert <Class Component> to <Stateless Functional Component> using Hooks with a callback function使用带有回调函数的 Hooks 将 <Class Component> 转换为 <Stateless Functional Component>
【发布时间】：2019-12-06 11:22:45
【问题描述】：

我正在尝试使用React Hooks 概念将Class Component 转换为Stateless Functional Component

我正在使用react-jsonschema-form - Custom field components reference link

const schema = {
  type: "object",
  required: ["lat", "lon"],
  properties: {
    lat: {type: "number"},
    lon: {type: "number"}
  }
};

// Define a custom component for handling the root position object
class GeoPosition extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...props.formData};
  }

  onChange(name) {
    return (event) => {
      this.setState({
        [name]: parseFloat(event.target.value)
      }, () => this.props.onChange(this.state));
    };
  }

  render() {
    const {lat, lon} = this.state;
    return (
      <div>
        <input type="number" value={lat} onChange={this.onChange("lat")} />
        <input type="number" value={lon} onChange={this.onChange("lon")} />
      </div>
    );
  }
}

// Define the custom field component to use for the root object
const uiSchema = {"ui:field": "geo"};

// Define the custom field components to register; here our "geo"
// custom field component
const fields = {geo: GeoPosition};

// Render the form with all the properties we just defined passed
// as props
render((
  <Form
    schema={schema}
    uiSchema={uiSchema}
    fields={fields} />
), document.getElementById("app"));

我正在像这样转换上面的代码。

function GeoPosition(props) {
  const [state, setState] = React.useState({ ...props.formData });

  const onChange = name => {
    return event => {
      setState(
        {
          [name]: parseFloat(event.target.value)
        },
        () => props.onChange(state) // GETTING ERROR - UNABLE TO USE CALLBACK
      );
    };
  };

  const { lat, lon } = state;
  return (
    <div>
      <input type="number" value={lat} onChange={onChange("lat")} />
      <input type="number" value={lon} onChange={onChange("lon")} />
    </div>
  );
}

我认为它会引发错误，我需要使用 React.useEffect()，但不知道如何实现它。请任何反应专家支持。

index.js:1375 警告：来自 useState() 的状态更新和 useReducer() Hooks 不支持第二个回调参数。到渲染后执行副作用，在组件中声明带有 useEffect() 的主体。

【问题讨论】：

你的情况是React.useEffect(func, [state])，表示当state改变时调用func

标签： javascript reactjs react-hooks react-tsx react-jsonschema-forms

【解决方案1】：

来自useState 的setter 函数不接受第二个参数：[hooks] useState - "setState" callback。我不确定您是否需要在这里使用useEffect，您可以在设置状态值后调用props.onChange(state)。另请注意，您需要将现有状态与新状态值连接起来，因为setState 将覆盖现有状态。

const onChange = name => {
    return event => {
      setState(state => {
          ...state,
          [name]: parseFloat(event.target.value)
        })
       props.onChange(state);
    };
  };

如果你真的需要确保props.onChange 仅在当前组件的状态设置了新值后被调用，你可以在 useEffect 中跟踪状态，尽管你需要使用自定义函数进行深度比较：react useEffect comparing objects

useEffect(() => {
   props.onChange(state);
}, [deepCompare(state)])

【讨论】：