我有一份幸存者名单:
const survivorsList = [
{
id: 1,
name: "Ace Visconti",
image_path: "static/survivors/ace_visconti.jpg",
},
{
id: 2,
name: "Vittorio Toscano",
image_path: "static/survivors/vittorio_toscano.jpg",
},
{
id: 3,
name: "Nancy Wheeler",
image_path: "static/survivors/nancy_wheeler.jpg",
},
{
id: 4,
name: "Claudette Morel",
image_path: "static/survivors/claudette_morel.jpg",
},
];
我try 在应用程序中的render函数中访问列表:
renderSurvivorName = () => {
const randomSurvivor = this.state.survivorsList.filter(
(survivor) => survivor.name === "Ace Visconti"
);
console.log("Random Survivor: " + JSON.stringify(randomSurvivor))
console.log("Survivor Name: " + randomSurvivor.name);
// return randomSurvivor['name'];
return randomSurvivor.name;
};
当我查看控制台时,我看到:
Random Survivor: [{"id":1,"name":"AceVisconti","image_path":"static/survivors/ace_visconti.jpg"}]. App.js:62
Survivor Name: undefined. App.js:63
Reaction应用程序的完整代码很简单,以下是重要的情况:
import React, { Component } from "react";
const survivorsList = [
{
id: 1,
name: "Ace Visconti",
image_path: "static/survivors/ace_visconti.jpg",
},
{
id: 2,
name: "Vittorio Toscano",
image_path: "static/survivors/vittorio_toscano.jpg",
},
{
id: 3,
name: "Nancy Wheeler",
image_path: "static/survivors/nancy_wheeler.jpg",
},
{
id: 4,
name: "Claudette Morel",
image_path: "static/survivors/claudette_morel.jpg",
},
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
survivorsList: survivorsList,
survivorName: "Ace Visconti"
};
}
// displayRandom = (status) => {
// if (status) {
// return this.setState({ randomCalculated: true });
// }
//
// return this.setState({ randomCalculated: false });
// };
renderSurvivorTitle = () => {
return (
<div className="nav nav-tabs">
<span
className={this.state.randomCalculated ? "nav-link active" : "nav-link"}
onClick={() => this.displayRandom(true)}
>
Survivor
</span>
</div>
);
};
renderSurvivorName = () => {
const randomSurvivor = this.state.survivorsList.filter(
(survivor) => survivor.name === "Ace Visconti"
);
console.log("Random Survivor: " + JSON.stringify(randomSurvivor))
console.log("Survivor Name: " + randomSurvivor.name);
// return randomSurvivor['name'];
return <div>Survivor: {this.state.survivorName}</div>;
};
render() {
return (
<main className="container">
<h1 className="text-white text-uppercase text-center my-4">Todo app</h1>
<div className="row">
<div className="col-md-6 col-sm-10 mx-auto p-0">
<div className="card p-3">
<div className="mb-4">
<button
className="btn btn-primary"
>
Select Random Survivor
</button>
</div>
<div>{this.renderSurvivorTitle()}</div>
<div>{this.renderSurvivorName()}</div>
{/*<div>{"Ace Visconti"}</div>*/}
</div>
</div>
</div>
</main>
);
}
}
export default App;
正如您可以从我的包中看到的那样,我使用的是最新的react .json:
{
"name": "dbd-randomizer-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "latest",
"@testing-library/react": "latest",
"@testing-library/user-event": "latest",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"web-vitals": "latest",
"bootstrap": "latest",
"reactstrap": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
如您所见,我try 使用点表示法和[]表示法来访问该字段.我不明白怎么会不设置场地.这两次通话之间的范围有没有可能发生变化?它是否在两次调用之间重新加载页面,并且没有设置值?
我找到了这个低价article.但由于我还没有进行API调用,我认为我不应该需要异步.我说错了吗?