0

我只是在玩 React hooks 以更好地理解它，最终得到了下面提到的这个用例。

所以我想要的是示例组件在第一次渲染时显示文本的大写值，否则它接收到的确切文本值

现在要实现这一点，我必须使用两个 useEffect

  1. 使第一次渲染的文本值大写
  2. 在道具更改/更新时更新文本值

我意识到使用这种方法我的状态（我认为）将被更新两次，即通过两个 useEffect 挂钩。另外，我必须保持效果挂钩的相同顺序，因为它们按顺序运行，并且更改顺序会使第一次渲染吐出文本值的正常大小写

实现这一目标的另一种（更好）方法是什么？

const { useState, useEffect } = React;
const { render } = ReactDOM;

const upperCase = str => str.toUpperCase();

const Sample = ({ text }) => {
  const [state, setState] = useState(upperCase(text));
  
  useEffect(() => {
    setState("text");
  }, [text]);
  
  useEffect(() => {
    setState(upperCase(text));
  }, []);

  return (
    <div>
      <p>{state}</p>
    </div>
  );
};

const App = () => {
  const [state, setState] = useState("Sample");
  return (
    <div>
      <Sample text={state} />
      {state}
      <input value={state} onChange={e => setState(e.target.value)} />
      <h3>App Component</h3>
    </div>
  );
};

render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

4

2 回答 2

3

我相信更好的选择是这样做：

const Sample = ({ text }) => {
  const ref = useRef(false);

  useEffect(() => {
    ref.current = true;
  }, [text]);

  return (
    <div>
      <p>{ref.current ? text : text.toUpperCase()}</p>
    </div>
  );
};

您将通过检查 value 知道这是否是第一次渲染ref.current。

于 2020-01-18T18:44:00.627 回答
-1

只需根据文本更改执行 1 个 useEffect，如下所示：

const Sample = ({ text }) => {
  const [state, setState] = useState(upperCase(text));

  useEffect(() => {
    if (text !== state) setState(upperCase(text));
  }, [text]);

  return (
    <div>
      {console.log(state)}
      <p>{state}</p>
    </div>
  );
};
于 2020-01-18T18:49:50.507 回答