初始化前无法访问“variableName”

Question

当我单击删除按钮时，我想过滤掉该 ID 并重新呈现列表，但我遇到了标题中提到的烦人的错误。

它最终会向服务器发送一个从数据库中删除的请求，但现在我想要的只是要从列表中删除的项目以及在没有该特定记录的情况下再次显示该列表。它基本上是一个包含一堆记录的表。每个旁边都有一个删除按钮。当您单击删除时，它应该删除我正在尝试对 .filter 执行的操作，然后将状态设置为新的 loadedFaq 减去被过滤掉的记录。

按钮：

<Button
  color="purple"
  label="Delete"
  onClick={() => deleteHandler(faq)}
/>

删除处理程序：

  const deleteHandler = async (faq) => {
    const originalFaq = loadedFaq; // loadedFaq is the original state
    const loadedFaq = originalFaq.filter((f) => f._id !== faq._id);
    setLoadedFaq(loadedFaq); // set the state to the original state minus the filtered out record
  };

更新：

它不喜欢我重新声明“loadedFaq”的事实。如果我这样做，它会起作用：

  const deleteHandler = async (faq) => {
    const originalFaq = loadedFaq;
    const loadedFaqTwo = originalFaq.filter((f) => f._id !== faq._id);
    setLoadedFaq(loadedFaqTwo);
  };

Answer 1

更简洁的解决方案是根本不使用临时变量：

const deleteHandler = async (faq) => {
  setLoadedFaq(loadedFaq.filter((f) => f._id !== faq._id));
};

这样避免了声明一个新的const同名引起的shadowing问题，更加简洁。

这是导致原始问题的原因的说明：

const {useState} = React;

const Example = () => {
  const [value, setValue] = useState('test');
  
  const myFunction = () => {
    // value comes from the outer scope
    console.log(value);
  }  
  
  const myOtherFunction = () => {
    // value comes from new variable
    const value = 'new!';
    console.log(value);
    // notice it does not modify the state value
    // if you click Test 1 again
  }
  
  const myWrongFunction = () => {
    // value is undefined because we *will* declare it within inner scope
    // even though the outer variable is technically within scope, we cant use it anymore
    console.log(value);
    const value = 'new!';
    
    // value is from new variable
    console.log(value);
  }
   
   return (
    <div>
      <button onClick={() => myFunction()}>Test 1</button>
      <button onClick={() => myOtherFunction()}>Test 2</button>
      <button onClick={() => myWrongFunction()}>Test 3</button>
    </div>
   )
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

loadedFaq 是你的状态，你不应该重新声明它。试试这样的：

const deleteHandler = async (faq) => {
    setLoadedFaq(loadedFaq.filter((f) => f._id !== faq._id)); 
  };