написать в местное государство из реквизита

Question

Я понимаю, что проблема довольно тривиальна, но я не могу с ней справиться, мне нужна ваша помощь.

Я перепробовал все решения в подобных вопросах, но у меня это не сработало

Суть в том, что когда я монтирую компонент, я запускаю fetch и получаю список статей из моего API, но это меня не устраивает, так как я не сохраняю их в локальном состоянии.

Кроме того, мои ужасные знания React, у меня есть еще 2 проблемы: 1) Когда я перемещаюсь по страницам, когда я возвращаюсь на страницу статей, количество результатов дублируется в арифметической последовательности, насколько я понимаюЭто проблема, что я держу статьи в подпорках, но мне нужно сохранить его в локальном состоянии.2) Отсюда истекает моя вторая проблема.Я попробовал все, но я не мог сделать props.articles -> state.articles, чтобы применить this.state.articles.map в будущем

// actions

import {FETCH_ALL_ARTICLES} from "../constants";


export const fetchAllArticles = () => {
  return (dispatch) => {
    let headers = {"Content-Type": "application/json"};

  return fetch("/api/articles/", {headers, })
    .then(res => {
       if (res.status < 500) {
         return res.json().then(data => {
           return {status: res.status, data};
       })
       } else {
         console.log("Server Error!");
         throw res;
    }
  })
  .then(res => {
    if (res.status === 200) {
      return dispatch({type: FETCH_ALL_ARTICLES, articles: res.data});
    }
  })
}
};

// компонент

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';

import {articles} from "../actions";


class Home extends Component {

constructor(props) {
  super(props);
  this.state = {
      articles: []
  }
  console.log(this.props.articles)
};

componentDidMount() {
    this.props.fetchAllArticles()
};

render() {
    return (
        <div>
            <Link to='/notes'>Notes</Link>
            <h2>All articles</h2>
            <hr />
            <table>
                <tbody>
                    {this.state.articles.map((article, id) => (
                        <tr key={`article_${id}`}>
                            <td>{article.headline}</td>
                            <td>{article.description}</td>
                            <td>{article.created}</td>
                            <td>{article.author.username}</td>
                            <td>{article.image}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
  }
}

const mapStateToProps = state => {
   return {
      articles: state.articles,
   }
};

const mapDispatchToProps = dispatch => {
    return {
       fetchAllArticles: () => {
           dispatch(articles.fetchAllArticles())
       }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

// редуктор

import {FETCH_ALL_ARTICLES} from "../constants";


const initialState = [];

export default function articles(state=initialState, action) {

switch (action.type) {

  case FETCH_ALL_ARTICLES:
    return [...state, ...action.articles];

  default:
    return state;
}
}

Answer 1

Каждый раз, когда ваш компонент монтируется, вы получаете все статьи.Когда вы выбираете все статьи, вы добавляете их в существующее состояние Redux:

return [...state, ...action.articles];

Чтобы исправить это, вы можете отказаться от старых статей вместо того, чтобы хранить их:

return [...action.articles];

ИлиВы можете избежать выборки статей, если они уже были получены:

componentDidMount() {
    if (!this.props.articles || this.props.articles.length === 0) {
        this.props.fetchAllArticles()
    }
};

Вам не нужно ничего делать с локальным состоянием.Ваше состояние Redux - ваш единственный источник правды.Хранение другой копии данных в локальном состоянии не имеет смысла.

Answer 2

Ваш вопрос неясен, но я постараюсь объяснить, основываясь на названии «запись в локальное состояние из реквизита».

Для достижения этого

componentWillReceiveProps(nextProps) { 
  if (nextProps.articles) {
    this.setState({ articles: nextProps.articles });
  }
}

* 1005 можно использовать жизненные циклы компонентов, как показано ниже.* В основном, когда происходит обновление этого компонента, этот метод жизненного цикла componentWillReceiveProps будет вызываться перед повторной рендерингом, поэтому мы можем вызвать здесь setState и сохранить его в локальном состоянии.

когда я возвращаюсь на страницу статей, число результатов дублируется в арифметической последовательности

Этого не должно быть, если вы правильно обращаетесь со своим редуктором.Например, после получения статей из API очистите массив, а затем сохраните только значение, полученное из API.Но тогда, конечно, все зависит от того, чего вы хотите достичь

Answer 3

Ваш вопрос короткий, но, насколько я понимаю, вы хотите передать данные через реквизиты от родительского компонента к дочернему, а затем сохранить их в локальном состоянии.

Для этого вам нужнодобавить конструктор в дочерний компонент и назначить реквизиты для состояния как.

import React,{Component} from 'react';
class ChildComponent extends Component{
  constructor(props){
    super(props);
    this.state={
      name: props.name,
      email: props.email      
    }
  }
  ..........
  // your child component logic

}

Передача данных через родительский компонент, например,

<ChildComponent name={this.state.name} email={this.state.email} /> 

Answer 4

Вы можете визуализировать ваши статьи непосредственно из this.prop.articles в функции визуализации.

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';

import {articles} from "../actions";


class Home extends Component {

componentDidMount() {
    this.props.fetchAllArticles()
};

render() {
    return (
        <div>
            <Link to='/notes'>Notes</Link>
            <h2>All articles</h2>
            <hr />
            <table>
                <tbody>
                    {this.props.articles.map((article, id) => (
                        <tr key={`article_${id}`}>
                            <td>{article.headline}</td>
                            <td>{article.description}</td>
                            <td>{article.created}</td>
                            <td>{article.author.username}</td>
                            <td>{article.image}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
  }
}

const mapStateToProps = state => {
   return {
      articles: state.articles,
   }
};

const mapDispatchToProps = dispatch => {
    return {
       fetchAllArticles: () => {
           dispatch(articles.fetchAllArticles())
       }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);