Как получить state через fetch?

Question

[Grione]

Подскажите, где ошибка? Никак не могу корректно получить данные с сервера.
Использую json server npm. Сейчас у меня в state приходит [object Object],[object Object],[object Object], и соответственно всё падает. При этом после фетча консоль показывает корректный массив.
Файл json выглядит вот так :

{
  "notes": [
    {
      "id": 1,
      "title": "First note",
      "text": "first text",
      "tags": [ "movies", "books", "thoughts" ],
      "editing": false
    },
    {
      "id": 2,
      "title": "Second note",
      "text": "Second text",
      "tags": [ "goals" ],
      "editing": false
    },
    {
      "id": 3,
      "title": "Third note",
      "text": "Another one text",
      "tags": [ "goals", "soccer", "poker" ],
      "editing": false
    }
  ]
}

//action creators 
export const fetchNotes = () => {
	return async (dispatch) => {
		fetch('http://localhost:5000/notes/').then((res) => res.json()).then((json) => {
			console.log(json); // вот здесь нормальный массив
			dispatch({
        type:'loadNotes',
        payload: json
      });
		});
	};
};

// reducers
let initialState = [];

const reducer = (state = initialState, action) => {
	switch (action.type) {
		case 'loadNotes':
			return [ ...state, action.payload ];

		default:
			return state;
	}
};

export default reducer;

// store
export const store = createStore(reducers, {}, applyMiddleware(thunk));

//index.js
ReactDOM.render(
	<React.StrictMode>
		<Provider store={store}>
			<App />
		</Provider>
	</React.StrictMode>,
	document.getElementById('root')
);

//app.js
const App = () => {
	const state = useSelector((state) => state.notes);

	const dispatch = useDispatch();

	useEffect(() => {
		dispatch(fetchNotes());
	}, []);

  console.log(`state: ${state}`);

	const [ showAddNote, setShowAddNote ] = useState(false);
	const [ tags, setTags ] = useState([]);

	// Get all tags
	const getAllTags = (notes) => {
		const newTags = new Set();

		if (notes.length) {
      console.log(`notes: ${notes}`)
			notes.map((it) => {
				console.log(`it: ${it}`); // А тут и далее [object Object],[object Object],[object Object]
				return it.tags.forEach((it) => newTags.add(it));
			});
		}

		return [ ...newTags ];
	};

	const filteredNotes = state.filter((note) => {
		return !tags.length || tags.find((item) => note.tags.includes(item));
	});

	//Sort notes
	const sortNotes = (checked, value) => {
		setTags(!tags.includes(value) && checked ? [ ...tags, value ] : tags.filter((n) => n !== value));
	};

	return (
		<div className="wrapper has-background-dark">
			<div className="container is-fluid">
				<div className="columns has-text-light">
					<div className="wrapper-column column has-background-dark">
						<AddNoteButton onAdd={() => setShowAddNote(!showAddNote)} isDisabled={showAddNote} />
						<TagsList tags={getAllTags(state)} onSort={sortNotes} />
					</div>
					<div className="wrapper-column column has-background-dark is-three-quarters">
						{showAddNote ? <AddNote onHide={() => setShowAddNote(false)} /> : ''}
						<NotesList notes={filteredNotes} />
					</div>
				</div>
			</div>
		</div>
	);
};

export default App;

Падает же всё вот так

Comments

[Алексей Уколов]

Если вас смущает только вывод в консоль, а в остальном всё работает, то дело в приведении объекта к строке. Консольте так и наслаждайтесь: console.log(`it`, it);

[Grione]

Алексей Уколов, нет конечно, не в консоли дело. Сейчас всё падает на первой функции, которая работает со state.

[Алексей Уколов]

Сначала посмотрите, что у вас в notes. Проблема точно не в [object Object] - у элементов массива notes нет свойства tags, потому и падает.

[Grione]

Алексей Уколов, сейчас выходит state


Получается мне нужно брать первый элемент массива. Я меняю в коде

const state = useSelector((state) => state.notes[0]);

Но тогда всё ломается и state становится undefined. Почему так происходит?

[Grione]

вот

Answer 1

[Алексей Уколов]

case 'loadNotes':
  return [ ...state, ...action.payload ];

Comments

[Grione]

Мне же нужно возвращать просто action.payload. Да, спасибо.