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

Question

我使用fetch 向服务器发出请求并获得响应 - 类别列表。这个列表我显示在视图表中。在右侧的每个类别附近，我都有按钮 Edit。当我单击此按钮时，会出现 form，其中包含一个 input 和按钮 submit，我可以更改某个类别的标题。我使用 API 方法 PUT 更改类别。

但是当我在编辑类别标题后单击按钮submit 时，我的列表相同。因为列表没有更新。在那一刻，我仍然没有看到标题名称发生了变化。

我的列表只更新我在浏览器中重新加载页面

点击按钮EDIT后如何更新列表？

/..... - 我删除有问题的代码只是为了减少问题中的代码

Home.js:

const Home = () => {
  const [value, setValue] = useState({
    listCategory: [],
    numberId: "",              
    isOpened: false,
    /.....
  });
 
useEffect(() => {
    async function fetchData(/......) {
        const response = await fetch(`/.....`, {
          method: 'GET',  headers: {/.....}   });
        const data = await response.json();
             setValue(prev => ({
                ...prev,
                listCategory: data.data,
                /......
             }));
    }  fetchData(/.....); 
  }, [/.....]);

const changeId = (argNumberId) => {         
     setValue({
        ...value,
        numberId: argNumberId,
        isOpened: true
    });};
    
  return (
    <div>
               <Table dataAttribute={value.listCategory}  changeId={changeId}  valueId={value.numberId} />
    
                //COMPONENT WHICH CHANGE TITLE CATEGORY:
               {value.isOpened && <ChangeCategory value={value.numberId} />}    
   </div>);};

ChangeCategory.js：

const ChangeCategory = (props) => {
    const {handleSubmit, values, handleChange} = useFormik({  
      initialValues: {
          title: '',
      },
    onSubmit: async (formValues) => {
        const response = await fetch(`${apiUrl}/${props.value}`, { // props.value - id category which I edit, I get this id from field numberId in state
            method:'PUT',  body: JSON.stringify(formValues),  headers: {/.....} });
        const data = await response.json();  
       }});
    
   return (    
    <div>
      <form onSubmit={handleSubmit}>   
       <InputCategory
         label="title"
         id="title" 
         inputProps={{
           name:'title',
           value: values.title,
           onChange: handleChange,   
       }}/>
          <button type="submit">Edit</button>
     </form>
   </div>);};

Table.js：

export default (props) => (
  <table>
    <thead>
      <tr>
        <th>ID</th>  
        <th>TITLE</th>
      </tr>
    </thead>
    <tbody>
       {props.dataAttribute.map(item => (
        <tr key={item.id}>
          <td>{item.id} </td>
          <td>{item.title} </td>
          // BUTTON WHICH OPEN MODAL AND CHANGE ID IN STATE
          <td><button onClick={() => props.changeId(item.id)}>Edit</button></td> 
        </tr>
      ))}
    </tbody>
  </table>
);

Answer 1

在成功调用 API 后，您可以直接在 onSubmit 方法中更新状态。 您已经有了数据，所以只需添加处理更新的方法：

onSubmit: async (formValues) => {
              const response = await fetch(`${apiUrl}${listRoute}/${props.value}`, { // props.value - id category which I edit, I get this id from field numberId in state
                  method:'PUT',  body: JSON.stringify(formValues),  headers: {/.....} });
              const data = await response.json();  
                // ADD THIS :
               props.updateList(data.data);
       }}); 

您需要在父组件中添加updateList：Home.js

const updateList = data => {

    setValue({ ...value, listCategory: data })
}

并将其作为道具传递给ChangeCategory

{value.isOpened && <ChangeCategory 
                       value={value.numberId} 
                       updateList={updateList}
                   />}