React JS Modal显示白色空白屏幕

Question

我有一个名为person的JSON格式数据，该数据来自文件User.js:中的API

const [person, setPerson] = useState([]);
const url = "http://localhost:8080/api/persons";
useEffect(() => {
axios.get(url).then((response) => {
setPerson(response.data);
});
}, [url]);

在另一个名为UpdatePersonForm.js的文件中，我试图在点击按钮后在弹出窗口中显示数据。

export const UpdatePersonForm= ({ person, personEditOnSubmit }) => {
return (
<div>
{person.map((item) => (
<tr>
<td>{item.name}</td>
</tr>
))}
</div>

}

然后它再次显示白色空白屏幕。如果我直接从UpdatePersonForm.js调用API，那么它工作正常。例如：

export const UpdatePersonForm= ({ personEditOnSubmit }) => {
const [person, setPerson] = useState([]);
const url = "http://localhost:8080/api/persons";
useEffect(() => {
axios.get(url).then((response) => {
setPerson(response.data);
});
}, [url]);
return (
<div>
{person.map((item) => (
<tr>
<td>{item.name}</td>
</tr>
))}
</div>

}

然而，如果我像上面那样从父文件中获取数据，那么我就错了。

Answer 1

使用const [person, setPerson] = useState("");初始化person变量，这意味着在第一次渲染时person将是一个字符串，而字符串没有.map方法。

使用const [person, setPerson] = useState([]);，你应该会没事的。

由于您希望在获取JSON后它是一个数组，因此还应该将其初始化为一个数组。