如何在不刷新页面的情况下显示更新的数据？

Question

我正在使用 React 创建一个更新函数：

function Company(props) {
    const { contact, company, companies, setCompanies } = props;
    const [isEditing, setIsEditing] = useState(false);
    const [editedName, setEditedName] = useState(company.company_name);
    const [editedAddress, setEditedAddress] = useState(company.company_address);

    async function deleteCompany() {
        const response = await fetch(`http://localhost/api/contacts/${contact.id}/companies/${company.company_id}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            let newCompanies = companies.filter(c => c.company_id !== company.company_id);
            setCompanies(newCompanies); // Update companies list
        }
    }

    async function updateCompany(e) {
        e.preventDefault();
        const response = await fetch(`http://localhost/api/contacts/${contact.id}/companies/${company.company_id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                company_name: editedName,
                company_address: editedAddress
            })
        });

        if (response.ok) {
            const updatedCompany = await response.json();

            // Update the company in the companies array
            const updatedCompanies = companies.map(c =>
                c.company_id === updatedCompany.company_id ? updatedCompany : c
            );
            setCompanies(updatedCompanies); // Trigger re-render by updating state
            setIsEditing(false); // Exit editing mode
        }
    }

以及返回方式：

 return (
        <tr>
            {isEditing ? (
                <>
                    <td>
                        <input
                            type="text"
                            value={editedName}
                            onChange={(e) => setEditedName(e.target.value)}
                        />
                    </td>
                    <td>
                        <input
                            type="text"
                            value={editedAddress}
                            onChange={(e) => setEditedAddress(e.target.value)}
                        />
                    </td>
                    <td>
                        <button className="button green" onClick={updateCompany}>Save</button>
                        <button className="button red" onClick={() => setIsEditing(false)}>Cancel</button>
                    </td>
                </>
            ) : (
                <>
                    <td>{company.company_name}</td>
                    <td>{company.company_address}</td>
                    <td>
                        <button className="button green" onClick={() => setIsEditing(true)}>Edit</button>
                        <button className="button red" onClick={deleteCompany}>Delete</button>
                    </td>
                </>
            )}
        </tr>
    );
}

我想做的是，当我更新时，新数据会立即显示，但事实并非如此。它仅在我刷新页面时显示。这只发生在

updateCompany()

，

deleteCompany()

效果很好（当我点击删除按钮时，公司数据立即消失）。

Answer 1

确保您的 updateCompany 函数正确处理服务器响应。您更新公司状态的逻辑看起来不错，但请确保公司在父组件中正确初始化。我正在添加控制台日志，以便帮助调试这些值。

async function updateCompany(e) {
    e.preventDefault();
    const response = await fetch(`http://localhost/api/contacts/${contact.id}/companies/${company.company_id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            company_name: editedName,
            company_address: editedAddress
        })
    });

    if (response.ok) {
        const updatedCompany = await response.json();
        console.log('Updated company data:', updatedCompany);

        // Update the company in the companies array
        const updatedCompanies = companies.map(c =>
            c.company_id === updatedCompany.company_id ? updatedCompany : c
        );
        console.log('Updated companies list:', updatedCompanies); 

        setCompanies(updatedCompanies); 
        setIsEditing(false); 
    } else {
        console.error('Failed to update company:', response.statusText);
    }
}

添加了用于调试的控制台日志记录。如果问题仍然存在，请尝试检查 API 如何响应 PUT 请求。