为什么刷新浏览器（React、MongoDB、Express、Node）后我的帖子是唯一的？

Question

我是 React 的新手，正在使用 MERN 堆栈制作一个应用程序来创建、读取、更新和删除食谱，但我收到 React 的警告，说我没有我的食谱的唯一密钥项目。但是，当我刷新浏览器时，警告消失了，我的食谱对象现在有了 id。看起来直到重新呈现菜谱项后才发布菜谱 ID。如果我将索引作为键传递，我不会收到警告，但我真的很想了解为什么我在尝试使用从 MongoDB.

生成的 ID 时不断收到此错误

class RecipeContiner extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "",
            ingredients: "",
            summary: "",
            recipes: []
        }

    }
    //GET RECIPES
    componentDidMount() {
        const url = 'http://localhost:5000/recipes/';

        axios.get(url)
            .then((res) => {
                this.setState({ recipes: res.data })
            }).catch(err => {
                console.log(err);
            });
    }

    onChangeHandler = (e) => {
        this.setState({ [e.target.name]:e.target.value})
    }

    //POST RECIPE
    onSubmitHandler = (e) => {
        e.preventDefault();
        const recipe = {
            title: this.state.title,
            ingredients: this.state.ingredients,
            summary: this.state.summary
        }

        const url = 'http://localhost:5000/recipes/add';

        axios.post(url, recipe)
            .then(res => console.log('new recipe!', res.data));

        this.setState({
            recipes: [...this.state.recipes, recipe],
        });

        e.target.reset();

    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmitHandler}>
                    <label>Title:</label>
                            <input type="text" onChange={this.onChangeHandler} name="title"/>
                    <label>Ingredients:</label>
                            <input type="text" onChange={this.onChangeHandler} name="ingredients"/>
                    <label>Summary:</label>
                            <input type="text" onChange={this.onChangeHandler} name="summary"/>
                    <input type="submit" value="Submit" />
                </form>
                <RecipeList recipes={this.state.recipes} />
                <Fab color="primary" aria-label="add">
                    <AddIcon />
                </Fab>

            </div>
        );
    }


//RECIPE LIST COMPONENT
const RecipeList = (props) => {
    console.log('props.recipes', props.recipes)
    const recipes = props.recipes;
    return (
        <div>
            <ul>
                {recipes.map((recipe, index) => (
                    <RecipeItem
                        key={recipe._id}
                        title={recipe.title}
                        ingredients={recipe.ingredients}
                        summary={recipe.summary}
                    />
                ))}
            </ul>
        </div>
    );

}

//RECIPE ITEM COMPONENT
const RecipeItem = (props) => {
    return (
            <li>
                <div>{props.title}</div>
                <div>{props.ingredients}</div>
                <div>{props.summary}</div>
            </li>
    )
}
}```


  [1]: https://i.stack.imgur.com/aZtEO.png

Answer 1

你的州在你 post id 之后没有得到 id。您只需从客户端添加新配方，而不是使用 id 形成服务器。

  axios.post(url, recipe)
        .then(res => this.setState({
        recipes: [...this.state.recipes, res.data],
    } ,()=>console.log('new recipe!', res.data)));

会成功的。

为什么刷新浏览器（React、MongoDB、Express、Node）后我的帖子是唯一的？

Why is my unique ID posts after refresh browser (React, MongoDB, Express, Node)?

key

mongodb

reactjs

mern