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

Question

我有显示类别列表的主要组件App。我从服务器获得此列表，并在组件表的视图表中支付。

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

Home.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"} }

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

但是我有问题：

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

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

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

Answer 1

仅在certain conditions下重新渲染组件，例如是否更新了组件的道具。但是，您始终可以告诉组件根据其他条件进行更新。

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

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