强制组件重新渲染答案

【问题标题】：force component to rerender强制组件重新渲染
【发布时间】：2019-09-03 21:26:19
【问题描述】：

我第一次使用react hooks，当我点击删除按钮时，我需要刷新页面才能看到项目已被删除，如何让组件在删除后立即重新渲染api调用？

 function Component(){
        const [data, setData] = useState({ contact: [] });

        useEffect(() => {
          const fetchData = async () => {
          const result = await axios("url");
          setData(result.data);
        };
        fetchData();
      }, [props])
        async function handleDelete(id) {
            try {
                await axios(`anotherurl`);
             }  catch (error) {
                console.log(error);
             }
           }
        return(
            data.contact.map(contact => (
                <li key={contact._id} >
                <p> contact.name</p>
                <button onClick={()=>handleDelete(contact._id)}>
                delete
                </button>    
                </li>
              ))
         )
        }

【问题讨论】：

delete 调用的结果是什么？我的意思是，在后端删除它不会改变你的本地状态，除非它是这样写的（不清楚提供的 sn-p 是否完整）。
@DaveNewton 后端正在工作我的意思是在前面它没有显示我点击删除按钮的项目被删除，直到我刷新页面并触发了通过 useEffect 的新提取（不显示在sn-p上）
为什么会这样？你所做的只是在后端删除它——这不会神奇地更新你的客户端的状态，除非你明确地编码它，或者通过在你的状态中删除它，或者通过删除返回相同的查询（这将反映现在——已删除的项目）等。

标签： reactjs react-hooks

【解决方案1】：

查看useState钩子：https://reactjs.org/docs/hooks-state.html

useState 类似于setState。当一个新的值被传递给useState(newValue)，组件会重新渲染

希望这能回答你的问题！

【讨论】：

我确实使用了 useState
@randomdreamer ic，我上次查看时您的代码已被编辑...在您致电handleDelete 之后，我没有看到您致电setState 更新本地数据的任何地方？

【解决方案2】：

有一个肮脏的选择（不推荐）：

this.forceUpdate();

【讨论】：

@randomdreamer 不太可能不工作——只是你期望发生一些你没有编码的事情。