在 React 中渲染之前调用函数的正确位置是什么？

Question

我在理解 React 的生命周期方面遇到了一些问题，所以我使用 useEffects() 因为我知道这是在组件呈现之前调用方法的正确方法（替代 componentDidMount ）。

  useEffect(() => {
    tagSplit = tagArr.split(',');
  });

然后我在组件上调用 tagSplit.map() 函数，但它说 tagSplit.map 不是函数

{tagSplit.map((item, index) => (
   <div className="styles" key={index}>
      {item}
   </div>
))}

有什么问题需要修复吗？还是正常的？

Answer 1

你可以这样做。

function App() {

    const [arr, setArr] = useState([]);

    useEffect(() => {
        let tagSplit = tagArr.split(',');
        setArr(tagSplit);
    }, []);

    return (
        <>
            {arr.map((item, index) => (
                <div className="styles" key={index}>
                    {item}
                </div>
            ))}
        </>
    )
}

Answer 2

useEffect 在渲染之后运行，然后随着依赖关系的变化而运行。

所以是的，如果你有 tagSplit 作为最初不支持 map 功能的东西，它会在第一次渲染时给你一个错误。

如果你想控制它运行的次数，你应该提供一个依赖数组。

来自docs,

Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update. (We will later talk about how to customize this.) Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects.

来自 Dan Abramov 博客的

This article 也应该有助于更好地理解 useEffect

const React, { useState, useEffect } from 'react'

export default () => {
  const [someState, setSomeState] = useState('')

  // this will get reassigned on every render
  let tagSplit = ''

  useEffect(() => {
    // no dependencies array,
    // Runs AFTER EVERY render
    tagSplit = tagArr.split(',');
  })

  useEffect(() => {
    // empty dependencies array
    // RUNS ONLY ONCE AFTER first render
  }, [])


  useEffect(() => {
    // with non-empty dependency array
    // RUNS on first render 
    // AND AFTER every render when `someState` changes
  }, [someState])

  return (
    // Suggestion: add conditions or optional chaining
    {tagSplit && tagSplit.map
        ? tagSplit.map((item, index) => (
            <div className='styles' key={index}>
              {item}
            </div>
          ))
        : null}
  )
}

在 React 中渲染之前调用函数的正确位置是什么？

What is the right place to call a function before render in React?

lifecycle

components

render

reactjs

react-hooks