Question

我目前正在尝试学习反应，并且在状态更改已保存并通过API返回后，我正在努力尝试在状态内更新记录的正确方法，这是迄今为止我能使它起作用的唯一方法通过返回整个记录列表并通过化简器用新列表更新状态。这并不理想，因为我不想为一个记录的更改而重新加载多个记录。

下面的Reducer代码当前将更新的记录添加到状态数据的末尾，而不是替换现有记录。

        case 'EDIT_AUTHOR': 
            return {
                ...state,
                authors: [...state.authors, action.payload]
            }

这是状态更新功能

    // Edit Author
    async function editAuthor(author) {
        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }

        try 
        {
            const res = await axios.put('api/v1/authors', author, config);

            dispatch({
                type: 'EDIT_AUTHOR',
                payload: res.data.data
            });
        } 
        catch (err) 
        {
            dispatch({
                type: 'AUTHORS_ERROR',
                payload: err.response.data.error
            });
        }
    }

在此先感谢您提供任何建议，如果您想查看更多代码，请告诉我，我想我已经提供了所需的一切。

Answer 1

当ather有一个ID时，您可以以此标识用户。当map返回一个新数组时，无需散布旧作者列表。

case 'EDIT_AUTHOR': {
    const updatedAuthor = action.payload;
    const authors = state.authors.map(author => updatedAuthor.id === author.id ? updatedAuthor : author);

            return {
                ...state,
                authors,
            }
}

更新状态，更新后的状态是从API返回的记录

1 个答案: