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

Question

我使用fetch向服务器发出请求，并获得响应-类别列表。我在视图表中显示此列表。在右侧的每个类别附近，我都具有编辑按钮。当我单击此按钮时，出现一个带有输入和提交按钮的表单，我可以将标题更改为某些类别。我使用更改类别的API方法PUT。

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

仅当我在浏览器中重新加载页面时，我的列表才会更新

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

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

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}
                   />}