React(Json)で、入れ子のデータを扱うには、data.map((value) => と書くと、for(let d in data) のような処理ができる。
main.rs
#[derive(Serialize, Deserialize, Debug, Clone)]
struct Name {
first : String,
last: String,
}
#[tokio::main]
async fn main() {
let mut names : Vec<Name> = Vec::new();
let n1 = Name { first:"taro".to_string(), last:"yamata".to_string()};
let n2 = Name { first:"hajime".to_string(), last:"tanaka".to_string()};
let n3 = Name { first:"hanako".to_string(), last:"yoshida".to_string()};
names.push(n1);
names.push(n2);
names.push(n3);
println!("{:?}", names);
let serialized: Vec<u8> = serde_json::to_vec(&names).unwrap();
println!("{:?}", serialized);
let file_path = format!("./data/data.txt");
let mut file = File::create(file_path.clone()).unwrap();
file.write_all(&serialized).expect("write failed");
}
data.txt
[{"first":"taro","last":"yamata"},{"first":"hajime","last":"tanaka"},{"first":"hanako","last":"yoshida"}]
App.js
import React, {Component} from 'react';
import './App.css';
class App extends Component {
render() {
return <div className="App">
<h1>React</h1>
<Blocks />
</div>;
}
}
class Blocks extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
this.timer = setInterval(
() =>
fetch('./data/data.text').then(response => {
return response.json();
}).then(json => {
this.setState({ data: json});
}),
2000,
);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
if (this.state.data) {
return <div>
{this.state.data.map((value) => (
<p>名前:{value.first} {value.last}</p>
))}
</div>
}
else {
return <div>Loading...</div>
}
}
}
export default App;
これを少し応用したい。