Question

我有一个子组件，我在其中传递数据，并且子组件内部的逻辑计算出了初始值。我想不出正确的方法将初始值发送回父组件而又不复制父组件内部的逻辑。

为演示该问题，我创建了以下伪造的示例：

（代码沙箱：https://codesandbox.io/s/snowy-dream-err7b?file=/src/App.jsx）

import React, { useState } from "react";

export default function App() {
  const data = [23, 57, 92];

  const [selected, setSelected] = useState(null);

  function handleSelect(selected) {
    setSelected(selected);
  }

  return (
    <div className="App">
      <h1>Selected is: {selected}</h1>
      <Child data={data} onSelect={handleSelect} />
    </div>
  );
}

function Child({ data, onSelect }) {
  const [selectedValue, setSelectedValue] = useState(Math.max(...data));

  function handleChange(e) {
    onSelect(e.target.value);
  }

  return (
    <div>
      <select
        onChange={handleChange}
        defaultValue={selectedValue}
        name="test"
        id="test"
      >
        {data.map((number, i) => {
          return (
            <option key={i} value={number}>
              {number}
            </option>
          );
        })}
      </select>
    </div>
  );
}

发生更改时，该值会很好地发送，但是父母如何知道选择了哪个初始值？因此，在该示例中，页面将呈现，标题中将输出92。

Answer 1

在子组件中使用useEffect（）函数。

useEffect(() => {
    onSelect(selectedValue);
}, []);

新代码：

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const data = [23, 57, 92];

  const [selected, setSelected] = useState(null);

  function handleSelect(selected) {
    setSelected(selected);
  }

  return (
    <div className="App">
      <h1>Selected is: {selected}</h1>
      <Child data={data} onSelect={handleSelect} />
    </div>
  );
}

function Child({ data, onSelect }) {
  const [selectedValue, setSelectedValue] = useState(Math.max(...data));

  useEffect(() => {
    onSelect(selectedValue);
  }, []);

  function handleChange(e) {
    onSelect(e.target.value);
  }

  return (
    <div>
      <select
        onChange={handleChange}
        defaultValue={selectedValue}
        name="test"
        id="test"
      >
        {data.map((number, i) => {
          return (
            <option key={i} value={number}>
              {number}
            </option>
          );
        })}
      </select>
    </div>
  );
}

Answer 2

一种方法是从父组件传递初始值。

第二次使用useEffect钩子在组件的安装座上调用onSelect。

但是我认为第一个解决方案更好，因为子组件将更加灵活和清晰。

您可以在父组件中设置初始值，并将其作为道具传递

const initialValue = useMemo(() => Math.max(...data), [])

将初始值发送到父组件

2 个答案: