Javascript 反应：点击按钮编辑后如何更新列表？

我有一个显示类别列表的主组件应用程序。我从服务器和组件表的视图表中的dispay中获取的列表

组件应用程序也有子组件

changegority

。使用此组件，我可以更改某些类别的标题

Home.js： ChangeCategory.js（使用表单中的方法编辑标题）： 也就是说，在回复中，我只得到我编辑的内容和新模型的标题

但我有个问题：

在表单中编辑我的标题并单击提交按钮后，我的列表不会更新！ 它仅在我在浏览器中重新加载页面时更新。我需要我立即看到列表中的标题更新。

---

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

仅在下重新渲染组件，例如如果组件的道具已更新。但您始终可以告诉组件根据另一个条件进行更新

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

---

考虑将布尔值添加到components状态shouldUpdate，并在单击按钮时将其设置为true。然后在组件呈现时将其设置回false。

更新列表后，您从未设置数据，也从未调用fetchData，因此甚至不应该有一个列表。很高兴听到这个消息！

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>

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

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>);};

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