Question

我制作了一个AddMovie组件，该组件会将影片添加到上下文组件的当前状态。在添加每部电影之后，我使它更新了电影的数目，并且还使其与其他电影一起将最新添加的电影添加到了DOM中。问题在于最新电影的名称未与其他电影一起显示。

如果我使用传统课程进行学习，我总是可以使它起作用，但是我想找出导致这种行为的原因是什么。有一些简单的组件，没有太多通读，您可以在这里查看：

问题是，当我添加更多电影时，上下文组件中的电影数组中的项目数正在更新。我要解决的问题是使新添加的影片与其他影片一起显示。

谢谢。

Answer 1

您将新电影的标题绑定到name属性，但是在Movie组件中，您使用了title属性来显示title。

只需更改addMovie组件内的AddMovie函数，即可将新标题保存到title属性中。

const addMovie = evt => {
    evt.preventDefault();
    setMovies(prevMovies => [
      ...prevMovies,
      { title: name, overview: "OK", id: movies.length + 1 } // <--- Here was previously `name` instead of `title`
    ]);
};

Answer 2

尝试一下：

import matplotlib.pyplot as plt
import numpy as np
%matplotlib inline

fobj   = open("iris.csv","r")
x1     =  [ ]
x2     =  [ ]
colors =  [ ]

iris_colors={"Iris-setosa":"red",
             "Iris-versicolor":"green",
             "Iris-virginica":"blue"}

for line in fobj:
    words = line.rstrip().split(",")
    if len(words) != 5:
        continue

    x1.append(words[0])
    x2.append(words[1])

    colors.append(iris_colors[words[4]])

fobj.close()

#plt.style.use("seaborn-whitegrid")

plt.scatter(np.array(x1),np.array(x2),c = colors)

plt.grid(1)
plt.xlabel("Sepal Length")
plt.ylabel("Sepal Width")
plt.title("Scatter plot")

plt.show()

使用挂钩和上下文更新状态后，如何使React呈现新的状态修改

2 个答案: