почему "карта" не работает? - PullRequest
Новая
       23

почему "карта" не работает?

0 голосов
/ 20 марта 2020

Будут созданы сообщения в блоге, и будет возможность удалить сообщение. Для этого я использую крюк.

Приложение. js: 

import React, { useState } from 'react';

import Blog from './Blog';
import Createpost from './Createpost';

const App = () => {
    const [posts, setPosts] = useState('');
    const removePosts = (index) => {
        setPosts(posts.filter((post) => post.index !== index));
    };
    return (
        <div style={{ padding: 8 }} className="container">
            <br />
            <hr />
            {<Createpost posts={posts} setPosts={setPosts} />}
            <hr />
            <Blog postData={posts} removePosts={removePosts} />
        </div>
    );
};

export default App;

Создать пост. js: 

import React, { useState } from 'react';
const Createpost = ({ user, posts, setPosts }) => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleTitle = (event) => {
        setTitle(event.target.value);
    };
    const handleContent = (event) => {
        setContent(event.target.value);
    };
    const handleCreate = (event) => {
        const newPost = { title, content, author: user };
        setPosts({ newPost, ...posts });
    };
    return (
        <form
            onSubmit={(e) => {
                e.preventDefault();
                handleCreate();
            }}
        >
            <div>
                author:<b>{user}</b>
            </div>
            <div>
                <label htmlFor="create-title">Title:</label>
                <input
                    tytpe="text"
                    value={title}
                    onChange={handleTitle}
                    name="create-
             title"
                    id="create-title"
                />
            </div>{' '}
            <textarea value={content} onChange={handleContent} />
            <input type="submit" value="Create" />
        </form>
    );
};

export default Createpost;

Блог. js: 

import React, { useState } from 'react';
const BlogBody = (props) => {
    const rows = props.postData.map((post, index) => {
        const [title, author, content] = post;
        return (
            <React.Fragment key={index}>
                <h2>{title}</h2>
                <h5>
                    <i>{author}</i>
                </h5>
                <h3>{content}</h3>
                <br />
                <button onClick={() => props.removePosts(index)}>Delete</button>
                <hr />
            </React.Fragment>
        );
    });
    return <div>{rows}</div>;
};
const Blog = () => {
    const [postData, removePosts] = useState('');
    return (
        <div>
            <BlogBody postData={postData} removePosts={removePosts} />
        </div>
    );
};

export default Blog;

после исключения npm start не отображается ошибка. но в браузере TypeError: props.postData.map не является функцией отображается в блоге. js

Может кто-нибудь помочь мне в этом? Я застрял здесь, кажется, навсегда.

Я недавно начал reactjs и вчера начал делать хуки. поэтому, пожалуйста, помогите.

Ответы [ 2 ]

3 голосов
/ 20 марта 2020

Вы создаете postData в виде строки: 

const [postData, removePosts] = useState('');

Если вы хотите, чтобы это был массив, вы должны изменить начальное значение. 

const [posts, setPosts] = useState([]);

// Add posts:
setPosts((prevPosts) => [...prevPosts, 'new post'])
1 голос
/ 20 марта 2020

Функция карты может использоваться только для массивов.

Здесь вы назначаете начальное состояние postData в виде строки

, т.е. const [postData, removePosts] = useState('');

Пожалуйста, измените начальное состояние в useState на массив

т.е. const [postData, removePosts] = useState([]);

...