时间戳

首页 > 解决方案 > 反应：单击按钮编辑后如何更新列表？

javascript - 反应：单击按钮编辑后如何更新列表？

问题描述

我有显示类别列表的主要组件应用程序。我从服务器获取的此列表并在组件表的视图表中显示。

组件 App 也有子组件ChangeCategory。使用此组件，我可以更改某些类别的标题。

主页.js：

const App = () => {

  const [value, setValue] = useState({
         list: [],
   });
useEffect(() => {
async function fetchData () => {
     const response =  await fetch(`путь`);
     const data = await response.json();
     setValue({
         list: data.data
    });
};
}, [])
 return (
    <div>
        <Table data = {value.list} />
        <ChangeCategory />
    </div>

在 Home.js 中请求后，我从服务器收到此响应：

{"data": [ 
 {"title": "bmw", "description": "good"},
 {"title": "tesla", "description": "good"},
 {"title": "ford", "description": "good"} ]}

ChangeCategory.js（使用表单中的方法 PUT 编辑标题）：

const  ChangeCategory = (props) => {
    const { /..... } = useFormik({  
      initialValues: {
          title: '',
      },
    onSubmit: async (formValues) => {
        const response = await fetch(`somepath`, {
           method: PUT,  
        } ) 
        const data = await response.json();  
       }});

   return (    
    <div>
      <form >   
       <input type="text"> </input>
          <button type="submit">Edit</button>
     </form>
   </div>);};

在 Home.js 中请求后，我从服务器收到此响应：

{"model":  {"title": "mercedes","description": "good"} }

也就是说，在响应中，我只得到我编辑的内容和新模型标题。

但我有问题：

在表单中编辑我的标题并单击提交按钮后，我的列表没有更新！

它仅在我在浏览器中重新加载页面时更新。我需要我立即看到列表中的标题更新。

单击按钮编辑后如何更新列表？

标签： javascriptreactjs

解决方案

React 仅在某些条件下重新渲染组件，例如组件的 prop 更新时。但是您总是可以告诉组件根据另一个条件进行更新。

由于您已经实现了useEffect钩子，您可以通过将变量添加到钩子的第二个参数来设置重新渲染条件（现在它只是一个空数组，也是一个有效的参数）〜您放入数组中的任何变量都会如果其值发生变化，则触发重新渲染。

考虑向组件状态添加一个布尔值，应该更新，并在单击按钮时将其设置为 true。然后在组件呈现时将其设置回 false。

推荐阅读