React 状态在使用 useState 设置之前会被保存吗？答案

【问题标题】：Does React state get saved before setting it with useState?React 状态在使用 useState 设置之前会被保存吗？
【发布时间】：2020-09-24 17:22:56
【问题描述】：

抱歉这个令人困惑的问题。首先我想分享我的代码：


  const intialState = {
    output: null,
    bookIdToDelete: null
  }
  const [state,setState] = useState(intialState)

  useEffect(() => {
    getDataFromServer().then(data => {
      console.log(data);
      if (data != 2) {
        // job gonna be here
        const output = data.map(book => {
          return (
            <div key={book._id} className="col-md-3">
              <div className="item">
                <img className="bookimage" src={book.imgs[0]} alt="img"/>
                <h3>
                  <Link to={"/admin/mybook/" + book._id}>{book.title}</Link>
                </h3>
                <h6>
                  <Link to={"/admin/mybook/" + book._id}>Edit</Link>&nbsp;&nbsp;&nbsp;
                  <button id={book._id} onClick={deleteBtnClick} className="btn btn-danger">Delete</button>
                </h6>
              </div>
            </div>
          )
        })
        setState({...state, output})
      }
    }).catch(error => {
      console.log(error);
    })
  }, [])


  const deleteBtnClick = (e) => {
    let bookId = e.target.id;
    console.log(state)
    setState({
        ...state,
        bookIdToDelete: bookId
     })
  }
  


console.log('showmodal',state);
  return (
    <>

       {state.output}

    </>
  )
}

export default MyBooks

基本上这样做是我获得了一个包含一些信息的数组并使用地图创建一个列表。我在 useEffect 中执行所有这些操作。每个项目都有一个删除按钮，该按钮调用另一个函数，该函数只是将我要删除的元素的 id 保存在状态中。发生的情况是，当我单击此删除按钮时，状态始终等于初始状态，而不是我在 useEffect 中更新的状态。似乎当我在将状态设置为其新值之前在 useEffect 中创建了元素数组时，“deleteBtnClick”函数中使用的状态是旧状态，在这种情况下是初始状态....

所以我解决了这个问题，只需将信息保存在 useEffect 中，然后在组件返回之前使用地图创建列表......但我仍然怀疑它为什么会发生......所以如果你知道为什么我会欣赏解释。谢谢！

【问题讨论】：

是的，你是对的。如果您将元素保存在您的状态中，它们将引用在 useEffect 运行时存在的 deleteBtnClick 函数（组件的第一次渲染），而该函数又将引用当时存在的状态.我认为仅将数据存储在状态中并在其外部渲染元素更有意义。但是，也知道您可以将回调传递给setState 以接收状态的“当前”值。
@FelixKling 嘿，谢谢您的回答。我没有考虑在 setState 中使用回调，虽然我认为我会使用在 useEffect 之外渲染的方法。

标签： javascript reactjs react-hooks

【解决方案1】：

一般来说，我会这样组织我的代码：

const intialState = {
    output: [],
    bookIdToDelete: null
  }
  const [state,setState] = useState(intialState)

  useEffect(() => {
    getDataFromServer().then(data => {
      console.log(data);
      if (data != 2) {
        // job gonna be here
        const output = data
        setState({...state, output})
      }
    }).catch(error => {
      console.log(error);
    })
  }, [])


  const deleteBtnClick = (e) => {
    let bookId = e.target.id;
    console.log(state)
    setState({
        ...state,
        bookIdToDelete: bookId
     })
  }          
  return (
    <>

       {state.output.map(book => {
          return (
            <div key={book._id} className="col-md-3">
              <div className="item">
                <img className="bookimage" src={book.imgs[0]} alt="img"/>
                <h3>
                  <Link to={"/admin/mybook/" + book._id}>{book.title}</Link>
                </h3>
                <h6>
                  <Link to={"/admin/mybook/" + book._id}>Edit</Link>&nbsp;&nbsp;&nbsp;
                  <button id={book._id} onClick={deleteBtnClick} className="btn btn-    danger">Delete</button>
                </h6>
              </div>
            </div>
          )
        })}

    </>
  )
}

export default MyBooks

【讨论】：